Interfaces made of real glass.

Tokens, a measured glass material and the components built from it. Every one renders live here, ready to tweak and copy.

Explore components View demo

Release 0.28

Mira Kovalenko started a deploy

Running

Rolling out18 of 25 regions

Auto-deploy main

Active users

8,931

+12.4%

One material, measured for contrast.

Each rung adds scrim until the text on it holds its ratio over the worst background. All three fall back to an opaque panel when the reader asks for less transparency.

A deep blue fjord between grey cliffs, seen from above — Photo by Alexey Topolyanskiy on Unsplash. Move the pointer over a panel to see the light follow it.

Five switches. One token layer.

Theme, material, density, accent and palette are attributes on the document. Flip one and every component on this page follows, with no re-render and no provider.

Theme

data-theme

Material

data-material

Scale

data-scale

Accent

data-accent

Palette

data-palette

<html data-theme="dark">

Invite your team

Projects are free for up to five people.

Workspace nameYou can change it later.

Share boards with the whole workspace

Healthy2 pendingPro plan

Built for the parts nobody demos.

Keyboard first, everywhere.

Menus, palettes, tables and trees move with arrow keys and announce what they do. This palette searches the catalog; try it.

Open palette: Ctrl+K
Move: ↑
Run: Enter
Close: Esc

Named springs.

One vocabulary of motion, shared by every component.

Accessible without asking.

Contrast ratios are tested per token, in every theme.
Reduced motion turns every spring into a cut.
Reduced transparency turns glass into an opaque panel.
Focus rings appear for keyboards, not for clicks. Press Tab to see one.

Charts that read the theme.

Series colours are tokens. Switch the accent above and watch.

Weekly installs
Category	npm	bun
May	312	120
Jun	428	166
Jul	391	210
Aug	520	248
Sep	611	301
Oct	702	377

Sample data.

Three files from zero to glass.

bun add @andrewbehma/glass-ui

Install
One package. React 19 and Tailwind 4 are peers, plus Motion and Radix for the interactive parts.
terminal
```
bun add @andrewbehma/glass-ui
```

Add the styles

Tokens, the material and the base layer. The tokens tell Tailwind where to find the classes.

globals.css

@import "tailwindcss";
@import "@andrewbehma/glass-ui/tokens.css";
@import "@andrewbehma/glass-ui/material.css";
@import "@andrewbehma/glass-ui/base.css";

Render

Import from the barrel or from a subpath. No provider to mount.

welcome.tsx

import { Button, Card } from '@andrewbehma/glass-ui';

export function Welcome() {
  return (
    <Card pad="lg">
      <p className="text-heading text-ink">Hello, glass.</p>
      <Button variant="solid">Get started</Button>
    </Card>
  );
}

Write it. Watch it render.

The playground runs any snippet against the whole library. Nothing to install, nothing to sign up for.

Open the playground Contact the author