glasscn

glasscn

LIQUID GLASS

Liquid glass components crafted for clarity, precision and movement. Shaped by flow. Defined by light.

CLARITY
FLOW
ADAPT
EVERY CURVE.
EVERY DETAIL.
MADE TO FLOW.

Our liquid glass components combine elegance with engineering, bringing transparency and movement to your most innovative creations.

The best Apple inspired CN library
Liquid glass components with registry-first ownership, theme-aware variants, and a native-feeling shadcn workflow.
kostyniuk/glasscn-components

Open source registry components for shadcn/ui.

Five glass treatments, from barely-there clarity to full liquid refraction.

Browse components
View on GitHub
Quick install
$ pnpm dlx shadcn add @glasscn
DESIGNED TO REFLECT YOUR VISION.
// 22 COMPONENTS

DROP-IN GLASS PRIMITIVES

Components ship with registry-ready variants — from glass surfaces to custom color treatments. Install just what you need; dependencies resolve automatically.

Glass Button

5 variants

Go to
Badge

Glass Badge

5 variants

Go to

Glass Button Group

5 variants

Go to

Glass Input

5 variants

Go to
Basic Item

A simple item with title and description.

Your profile has been verified.

Glass Item

5 variants

Go to

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

Glass Checkbox

5 variants

Go to

Glass Radio Group

5 variants

Go to

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices

Glass Separator

5 variants

Go to
June 2026

Glass Calendar

5 variants

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

Glass Card

5 variants

Go to

The current CEO of Apple is Tim Cook. Apple has announced that Cook will step down on September 1, 2026, and will be succeeded by John Ternus.

Exodus Honey

Glass Scrim Card

5 variants

Go to
AK
Alex Kostyniuk

Glass Contact Pill

5 variants

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

Glass Code Block Command

5 variants

Go to

Glass Alert

5 variants

Go to

Glass Popover

5 variants

Go to
x

Glass Progress

5 variants

Go to

Glass Dropdown Menu

5 variants

Go to

Glass Combobox

5 variants

Go to

Glass Select

5 variants

Go to

Glass Alert Dialog

5 variants

Go to

Glass Skeleton

5 variants

Go to

Workspace

Aurora

Team
Navigate
Preferences

Glass Surface

Compound navigation with matching glass states.

Glass Sidebar

5 variants

Go to
// 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-refract
glassVariant="liquid-refract"
SVG displacement filter. Real lens-like refraction with curved glass effect.
// INSTALLATION

ONE COMMAND

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.