Refractive UI system · v0.1

Actual glass
for product
interfaces.

Glassy UI is a copy-ready set of refractive web elements built from a real glass system — generated displacement maps, layered rims, and opt-in surfaces that refract a supplied visual layer inside their bounds.

Browse componentsInstall

11: registry items
SVG: generated displacement
Source: installed into your app

Console glass preview

Ship it

The library

One material system.
Every primitive.

Buttons, inputs, surfaces, navigation, overlays, and feedback — all carved from the same material tokens. Showcase surfaces can refract a decorative layer supplied to that surface.

Get started

Button

Refractive press states with keyboard-safe focus.

Email[email protected]

Input

Fields that live inside the same material system.

Surface

Low-level refractive primitive for any layout.

Tabs

Segmented navigation with a gliding glass thumb.

Tooltip

Floating disclosure built from the panel surface.

Copied to clipboard

Toast

Feedback built from the same glass material tokens.

Under the glass

Not frosting. Refraction.

Give a surface a decorative refraction background and it generates a per-element displacement map that distorts that owned layer near the edges.

refractionBackground

generated SVG filter

layered inset rim

<GlassSurface
  refraction="strong"
  refractionBackground={<BackdropArt />}
>
  Surface content
</GlassSurface>

Copy it in. Ship today.

Initialize shadcn, map @glassyui to the hosted registry, then add only the source you need.

pnpm dlx [email protected] add @glassyui/glass-buttonInstallation guide

Actual glassfor productinterfaces.