Libraries
Bezel is open source beyond the app itself. Four packages do the work of getting tokens out of Bezel and into a running interface, and you can use any of them on their own.
| Library | Use it to |
|---|---|
| bezel-kit | Turn design-tokens.json into CSS variables at build time |
| crystal | Let the live preview panel push token edits into your app |
| loupe | Resolve the active theme and load your token web fonts at runtime |
| radium | Start from a component library already wired to Bezel |
Which do I need?
Just getting tokens into an app? bezel-kit alone. It reads your tokens and writes a scoped variables.css. That's the whole integration. See the Quick Start.
Want the preview panel to update your app live? Add crystal. It's the postMessage bridge between Bezel and your running app, and it's development-only.
Building a theme switcher, or using font tokens? Add loupe. It resolves which context to apply on load and injects the web fonts your tokens reference.
Starting fresh? radium is a complete component library already set up with all three, so you can see how the pieces fit rather than assembling them.
Licensing
bezel-kit, crystal, and loupe are PolyForm Shield 1.0.0, which is free for any use, including commercial and internal, except building something that competes with Bezel. radium is MIT.