Foundations

Materials

Materials are surface treatments that sit on top of the light or dark theme rather than replacing it. Liquid Glass is the first: a translucent surface with a backdrop blur, a hairline border, a specular top highlight, and a soft shadow. One definition works in both light and dark.

Live demo

Two cards over a gradient — one solid, one glass. The gradient refracts through the glass panel.

Usage

Opt in per surface with surface="glass". It is supported on the surface components where translucency reads well — Card, Dialog, Popover, Drawer, and TopNav. The prop stamps data-material="glass" on the element so the --glass-* variables resolve locally; nothing else in the tree is affected.

import { Card, Dialog } from '@nexub/react';
import '@nexub/themes/glass';   // once, after base/light/dark

<Card surface="glass">Frosted card</Card>

<Dialog.Content surface="glass">…</Dialog.Content>

When to use it

• Overlays and navigation over content — dialogs, popovers, drawers, a sticky top nav.
• Hero or feature surfaces where depth adds polish.
• Not as a global default — stacked blurred surfaces are GPU-costly, and glass over a flat background just looks like a tinted panel.

Accessibility

Translucency reduces contrast, so glass automatically falls back to a solid surface under prefers-reduced-transparency: reduce and prefers-contrast: more — the blur is dropped and the solid --color-bg-default is used. Keep text on glass to high-contrast colours; don't place body copy directly over a busy backdrop.