glasscn

Glass Components

The current public glasscn component surface, filtered down to the pieces that visibly use the translucent design language. Every tile includes a live preview and a copy-ready code snippet.

Custom

1

Tab Card

Tabs and frosted card content merged into one continuous glass surface.

Workspace Overview
Monitor the current glass surface state across the product.
12
Scenes
4
Themes
98%
Readiness
Source

Components

25

Badge

Compact status labels with soft glass emphasis.

StableTranslucentGlass OutlinePassiveAttentionInline Link
SourceDocs

Button

Primary actions and icon controls with frosted states.

SourceDocs

Button Group

Segmented action clusters tuned for glass layouts.

AI Preset
SourceDocs

Card

Structured content surfaces for dashboards and settings.

Glass Revenue
Monthly recurring revenue across premium tiers.
+18%
$48,240
Pro
432
Team
187
Scale
29
Updated 6m ago
SourceDocs

Checkbox

Compact binary controls with a softened translucent fill.

SourceDocs

Empty

Calm empty states with supportive calls to action.

No presets yet
Save your favorite blur, tint, and border combinations to reuse them across the product.
SourceDocs

Item

Composable rows for lists, cards, and navigation cells.

Security Center

Review permissions, tokens, and trusted devices.

Appearance Presets

Save and reuse your favorite glass scenes.

6 saved
SourceDocs

Separator

Low-contrast dividers that preserve surface rhythm.

LayersSpatial rhythm
SurfaceOverlayInline
SourceDocs

Spinner

Loading indicators that blend into glass controls.

Syncing layers
Rendering
SourceDocs

Field

Form composition for labels, descriptions, and states.

Used for account alerts and access recovery.

Preferences
SourceDocs

Input

Single-line text entry with translucent focus treatment.

SourceDocs

Input Group

Composes inputs, icons, and buttons into one surface.

SourceDocs

Best for command bars, search fields, and mixed-action inputs where controls should read as a single glass surface.

Label

Typographic labels sized to pair with glass form controls.

SourceDocs

Radio Group

Single-choice selection with translucent option controls.

SourceDocs

Slider

Range control with translucent tracks and tactile handles.

Reflection intensity72%
SourceDocs

Switch

Compact toggles with softened translucent rails.

SourceDocs

Tabs

Segmented navigation with a frosted translucent shell.

Workspace overview
Live
12
Layers
4
Themes
98%
Ready
SourceDocs

Textarea

Multi-line entry with the same softened glass fill.

Multi-line input with the same soft glass treatment as the rest of the form system.

SourceDocs

Dialog

Modal surfaces with heavy blur and strong focus framing.

SourceDocs

Popover

Inline floating detail panels for secondary content.

SourceDocs

Command

A command surface for search-first navigation and actions.

SourceDocs

Built on cmdk and designed to compose naturally with Dialog for command-palette flows.

Scroll Area

Custom scrolling containers that stay visually soft.

SourceDocs