Glass thatactually refracts.

Copy-ready React components with generated displacement maps, layered rims, and source you own.

pnpm dlx [email protected] add @glassyui/glass-input @glassyui/glass-button

Copy-ready source

Welcome to Glassy UI

Source-ready refractive interface components.

The component set

Built from one glass system.

Six representative components, all carved from the same material tokens. Browse the full registry for all eleven copy-ready primitives.

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.

Keep a decorative scene fixed to the viewport and each surface bends the exact part it passes over with its own generated displacement map.

refractionBackground

generated SVG filter

layered inset rim

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

Install

Install only what you need.

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

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