Glass UI
Glass components · v0.4.0

Glassmorphism that ships.

Tune iOS-style glass in a live playground with iPhone and iPad preview. Export Tailwind and NativeWind TSX, CVA components, shareable URLs, and GLASS.md.

Open playground
Live preview below
Primitives

Seven components. One glass system.

A full Now Playing screen inside an iPhone shell — the same primitives you tune in the playground. On desktop, hover a block; on touch devices, tap to see its name.

Live preview

Card

Aurora — Side B

Glass UI · Live mix

Input

Search your library…

Button

Continue mix

Open the playground for all seven primitives — navbar, modal, tab bar, and switch.

Open playground
GLASS.md

GLASS.md export

One markdown file with your tokens, the generated TSX, suggested file paths, and a short checklist before you merge.

  • Tokens — theme, blur, radius, intensity, borders
  • TSX — inline snippet or reusable CVA component
  • Works with Cursor, Claude, Copilot, or copy by hand
GLASS-card.md·
# GLASS.md — GlassCard
 
## 1. Meta
| Component | GlassCard |
| Platform  | React Web |
| Mode      | Reusable  |
| Tailwind  | v4        |
 
## 2. Design specification
| theme     | dark   |
| blur      | xl     |
| rounded   | 2xl    |
| intensity | medium |
 
## 3. Generated code
```tsx
export const GlassCard = forwardRef(
  ({ theme, blur, ...props }, ref) => (
    <div className={cn(glassCard({ theme, blur }))} {...props} />
  ),
)
```
 
## 4. Acceptance criteria
- [ ] Builds without TypeScript errors
- [ ] Uses backdrop-blur on a non-flat background
- [ ] Reuses existing cn() helper
 
Mobile surface

Same glass on React Native.

Each primitive exports as a NativeWind View, Pressable, or TextInput — same tokens as the web preview.

Open playground

  • NativeWind classes

    backdrop-blur, borders, and CVA variants map 1:1 from the web playground.

  • Inline or reusable

    Drop a snippet into a screen or copy a typed component file.

  • GLASS.md included

    Install notes, file paths, and a short checklist for Expo.

How it works

Three steps.

01

Design in the playground

Pick a primitive, tune blur and tint, and preview on web and native with device frames and wallpapers.

02

Export the right format

Web TSX or NativeWind from the Native tab, inline or reusable CVA — plus GLASS.md with paths and tokens.

03

Paste GLASS.md

Drop it into Cursor, Claude, or Copilot — or use the checklist and copy what you need yourself.

0

Primitives

0

Code variants

0

Export modes

0

Glass controls

Try it

Open the playground.

Pick a component, adjust blur and tint, then copy TSX or GLASS.md into your project.

Open playground