Introduction

glasscn

Glassmorphic components for shadcn — frosted surfaces over a living aurora, built on Radix and Tailwind v4, installed as source.

glasscn is a shadcn registry. You don’t install a package: the shadcn CLI copies each component into your project, where it’s yours to read and change. Components keep shadcn’s APIs where one exists, so @/components/ui/button becomes @/components/glass/button and nothing else changes.

Everything visual is a CSS variable — the frost, the rim, the blur and saturation, the aurora’s three colours — set by one foundation item and a palette theme. Start with Installation, then make it yours in Theming.

Surfaces

The living ground: three palette blobs drifting over the base colour. Pure CSS, reduced-motion aware.

A frosted pane — the base every surface is made from. Intensity, tint and elevation variants; asChild.

shadcn's Card API on glass: header, title, description, action, content, footer.

Re-theme a subtree at runtime: a different palette, material, shape or scheme for one card, section or preview.

Typography

Heading, Text, Display, Blockquote, InlineCode, List and TextLink on the theme's modular scale — fonts, weights, case and numerals from the type tokens.

Rich text (Markdown, MDX, CMS) set in the theme's type: headings, links, lists, quotes, code, tables.

Controls

shadcn's Button with glass, tinted and secondary variants, capsule or rounded, squash on press.

Small capsule labels: solid, tinted, glass, secondary, outline, destructive.

A filled field for glass: soft fill, accent caret and focus ring.

A filled, auto-growing text area for glass.

An accessible label.

The iOS switch: capsule track fills with the accent, white knob springs across.

shadcn's Checkbox on glass: a soft box that fills with the accent, with an indeterminate dash.

Segmented control

The iOS segmented control: one raised thumb slides to the chosen segment; always has a selection.

Tabs with a sliding pill (glass capsule, plain) or a sliding underline.

A soft track, accent range and white glass knobs. Ranges supported.

A capsule bar filling from the second chart colour into the accent.

Keycaps on glass, singly or grouped.

A hairline that reads on glass.

shadcn's Avatar on glass: a round photo with a hairline rim, initials on a soft fill, and overlapping groups.

Overlays

A strong-glass modal over a dimmed, softened page.

A floating glass panel that slides in from any edge, inset like an iPad sheet.

Floating glass content anchored to a trigger.

A small glass capsule on hover and focus.

A glass menu: items, checkbox and radio items, labels, shortcuts, submenus.

Sonner toasts dressed in glass.

Navigation

The floating tab bar: a glass capsule of destinations with a sliding pill, plus a round action button.

iOS Settings-style inset grouped rows on glass: headers, footers, icon tiles, values, chevrons.

Data

Concentric Activity-style rings that sweep in and lap past 100%. Server-component safe.

One ring that closes around its content — a goal, a countdown, a seal.

A smooth measure over time that draws itself, with a soft area and the latest point lit.

A figure on a glass tile: icon, value, label, trend.

Ranked horizontal bars with the label inside and the value at the end — top habits, sources, pages.

A three-quarter meter with an optional target tick and the figure in its bowl. Server-component safe.

A row of status blocks — uptime, or a habit's last 30 days.

A range split into coloured bands with a marker — a readiness score, a budget.

Days in week columns coloured by intensity — a contribution graph with month and weekday labels and a legend.

The chart host: TanStack Charts in a container that maps glass tokens — series colours from --chart-*, a glass-strong tooltip, inherited type — plus an HTML legend and chartColor().

Volume over time: gradient areas under a line per series, optionally stacked, with a grouped glass tooltip.

Amounts per category, grouped or stacked, vertical or horizontal, with theme-rounded bar ends.

Measures over time, one smooth line per series, with a grouped glass tooltip and a crosshair.

Parts of a whole as a ring of rounded slices, with content in the hole and a legend.

shadcn's Table for glass: hairline rows, fill on hover and selection, muted headers, density-aware cells.

A sortable, searchable, paginated table with row selection — TanStack Table v9 on the glass table.

Chat

A conversation in parts: a thread that sticks to the latest message, user and assistant bubbles that group into runs, receipts, day dividers, typing dots, quick replies and a composer where Enter sends.

Blocks

Activity rings, stat tiles, a ranged sparkline and a 39-week heatmap.

Stacked active minutes over a range, the training mix as a donut, a recovery gauge, top habits and a sortable table of recent sessions.

iOS Settings in glass: grouped rows, icon tiles, a switch, a segmented control and a slider.

A strong-glass sign-in card with email, password and a passkey option.

A conversation on glass: grouped turns with avatars, a read receipt, typing that resolves into a reply, quick replies and a floating composer.