Foundations
Materials
Glass is a material, not a theme: a translucent surface (the surface role at the dial’s opacity), blur + saturate on what’s behind it, a hairline with a bright top edge, and a soft shadow. Because the fill is a role, one definition works in light and dark. On iOS 26+, @nexub/react-native uses the system Liquid Glass instead (expo-glass-effect).
Live demo
The dial is the real setting. It changes every glass surface on this site and is remembered.
Where glass belongs
The floating control layer only: top bars, floating toolbars, popovers, menus, sheets and dialogs. Card glass is for surfaces over imagery or media.
Never glass on glass. Inside glass, use fills and secondary text.
At most three glass layers in view (they stay at 120 fps while scrolling).
Tint only the one primary action (
data-glass-tint="primary").
import '@nexub/themes/glass'; // once, after base/light
<TopNav.Root surface="glass" scrollEdge="soft">…</TopNav.Root>
<Toolbar.Root floating>…</Toolbar.Root>
<Dialog.Content surface="glass">…</Dialog.Content>
<Button variant="glass">Play</Button>Thickness
Larger glass is thicker: more blur and a deeper shadow. Components pick it for you: buttons are thin (8px blur), bars and popovers regular (16px), dialogs and drawers thick (28px). Override with data-glass-thickness.
Scroll edge
Sticky bars take scrollEdge="soft" to let content dissolve under the bar instead of meeting a divider, or "hard" for an opaque band over pinned headers.
The intensity dial
Apple’s answer to glass legibility was a user setting from clear to tinted. Ours is useTheme().setGlass('clear' | 'balanced' | 'tinted' | 'off'), applied before paint by ThemeScript and offered in the account menu of a glass AppHeader.
Accessibility
Glass becomes a solid surface with no blur under prefers-reduced-transparency, prefers-contrast: more (plus a 2px outline), forced colours, the off dial setting, and in browsers without backdrop-filter. Keep text on glass to the on-surface roles; never body copy over a busy backdrop with the clear variant.