glasscn
v0.4 — Liquid Bold variant shipped

Apple Glass,
rebuilt for shadcn.

A glassmorphism component library for React — fifteen drop-in primitives with five surface variants from clear to liquid-bold. Source lives in your codebase.

Browse components View on GitHub
// 15 components

Drop-in glass primitives, on top of shadcn.

Every component ships with five glass variants — clear, frosted, subtle, liquid, and liquid-bold. Install just what you need; dependencies resolve automatically. Built on top of shadcn, with full compatibility across shadcn versions, these components render the underlying shadcn primitives under the hood so you keep the same foundation, API shape, and ownership model.

Glass Button

5 variants

add
Badge

Glass Badge

5 variants

add

Glass Alert

5 variants

add

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices

Glass Separator

5 variants

add
May 2026

Glass Calendar

5 variants

add
Login to your account
Enter your email below to login to your account
Forgot your password?

Glass Card

5 variants

add

Adds the frosted treatment to nested panels and interactive controls for a denser glassmorphism look.

Glass Checkbox

5 variants

add
$ npx shadcn add @glasscn/glass-code-block-command

Glass Code Block Command

5 variants

add

Glass Combobox

5 variants

add

Glass Select

5 variants

add

Glass Alert Dialog

5 variants

add

Workspace

Aurora

Team
Navigate
Preferences

Glass Surface

Compound navigation with matching glass states.

Glass Sidebar

5 variants

add
// 5 surfaces

One system, five refractions.

From the thinnest pane to a glossier-than-iOS finish — choose the variant that matches the moment.

clear
glassVariant="clear"
Light backdrop blur, hairline border. The thinnest pane of glass.
frosted
glassVariant="frosted"
Heavy 16px blur. Diffuses what's behind it like real frosted glass.
subtle
glassVariant="subtle"
Whisper-thin tint. For nested surfaces that should barely register.
liquid
glassVariant="liquid"
Pure CSS. Multi-layer bevel, sheen, slow ambient drift, warm glow.
liquid-bold
glassVariant="liquid-bold"
Amped-up liquid. Brighter chamfer, glossier finish, deeper saturation.
// installation

One command. Local source ownership.

Powered by the shadcn registry — components land directly in your codebase. No npm package, no version lock, no black box.

$npx shadcn add @glasscn/glass-button
01
Install via shadcn
Resolves all registry dependencies.
02
Source lives with you
Edit, theme, fork — no upstream surprises.
03
Pick a variant
Five glass surfaces — drop-in via prop.