radium

A shadcn/ui-based component library and design system, already wired to Bezel end to end. It's the fastest way to see every piece working together, and it's what the preview panel shows by default, at radium.style.

Github

What's inside

Package	Contents
@radium/ui	~55 components built on Base UI and Tailwind CSS v4, with per-component exports
@radium/storybook	A Storybook 10 app showing every component plus full-page examples: auth, dashboard, marketing

Unlike the other libraries, radium isn't published to npm. It's a repository you clone or fork, because the point is to own and change the components.

Getting started

git clone https://github.com/bezel-labs/radium.git
cd radium
npm install
npm run storybook   # generates tokens, then serves on http://localhost:5004

Needs Node 22+.

How it's wired

Radium is a working reference for the whole integration:

• design-tokens.json at the repo root, the same file Bezel produces
• bezel.json pointing the generated CSS and TS modules into the UI package
• npm run tokens (bezel build) runs ahead of every dev and build, so styles can never drift from tokens
• The Storybook manager runs crystal's relay and the preview runs its receiver, which is how live token edits reach the components
• The preview uses loupe to resolve the initial context and load font tokens

If you're integrating Bezel by hand and want to see how a piece is meant to fit, this is the place to look.

As a starting point

When you create a Bezel project you can start from radium, which gives you a repository already containing a valid design-tokens.json and the full build wiring. From there the tokens you edit in Bezel flow straight into the components.

MIT licensed, so you're free to take it in whatever direction you need.