Theming

A style changes how a block looks and how big it is, never what it does. Layout, data, states, keyboard handling and motion are identical. Sorbet is the consumer style: 40px controls, 48px rows and a larger type scale in Nunito, warm trays with raised tiles and inset fields instead of hairline borders, and a tactile mint primary. Because everything is larger, some blocks declare a taller height in Sorbet.

To install a block in another style, add the style to its name. Both builds land in the same file, so moving a block between styles is one command:

Each style brings its own theme item, @reactbits-pro/app-ui-theme-sorbet for Sorbet, with the same rounding ladder and that style’s accent. Everything below works the same in every style: radius, accent, base and typeface apply on top of a style’s own defaults. Sorbet’s untouched base is its own warm cream, and picking a base retints its trays and wells too (the copied CSS sets --rb-n-100 and --rb-n-200 for them). Sorbet is drawn for Nunito; set it as your body font to match these docs exactly.

Moving a project that already has Default blocks? Install the Sorbet theme once on its own. The CLI keeps variables your stylesheet already defines unless the theme itself is what you add, so the Sorbet blocks would otherwise keep the Default accent:

Use the panel in the bottom-right corner of any Application UI page to try combinations against real blocks. When you like what you see, Copy CSS gives you exactly the rules below, filled in with your choices.

You usually will not need to run this. Every Application UI block names the theme as a dependency, so your first block install pulls it in and later ones reuse it.

Every themed value is a variable with its designed value baked in as the fallback. A block dropped into a project that has never installed the theme still renders exactly as it does here, because the fallback fires. Theming is additive: it is never a prerequisite, and deleting the variables later is safe.

Blocks never write a raw corner value. They reference a rung, and the rungs are offset from --rb-radius by a fixed number of pixels rather than a ratio. That is what keeps nested corners correct: a card inset by a 4px gutter sits exactly one rung softer than its container at every setting, so the arcs stay concentric whether you pick 0 or 26.

--rb-r-full is the pill Sorbet draws its controls with. From a 9px base up it is a full stadium; below that it opens into a rounded rectangle at 1.5 times the base, and it is square at 0, so the knob shapes the controls as well as the surfaces. Sorbet's tiles sit on 6xl, 16px above the base, which keeps a pill in a tile's corner concentric with it.

There is little point going above 26px. A browser clamps a corner at half the shorter side, and every Default control is 40px or shorter, so 26 already renders them as full stadiums. Higher values only round large surfaces, which starts clipping content.

Set both halves of the pair. --rb-accent-fg is the text and icon colour that rides on top of the accent, and it is a separate variable because a mid-tone accent needs dark text where a deep one needs white. Hover states are derived from the accent automatically, so there is nothing else to override.

Light and dark usually want different values: a colour with enough contrast on white is normally too dark on near-black. The panel picks a matched pair for each of its presets, which is a reasonable starting point even if you replace the hues.

Surfaces, borders and body text use Tailwind’s neutral scale, so you retint the whole interface by redefining that scale rather than anything of ours. This one is warmed toward mauve:

Keep the lightness of each step and change only the chroma and hue. The system leans on the contrast between adjacent steps to separate a card from the page behind it, and flattening that is the quickest way to make an interface look muddy.

No block declares a font family, so they take whatever your body text uses. Type sizes are set in pixels rather than rem within a block, so switching families changes the voice without disturbing any of the density work.

Useful for an admin area that should feel distinct from the product, or for embedding a block inside a host application with its own rounding. Declare the variables on any ancestor and everything beneath it re-resolves.