shadcn registry · 88 components & blocks

Glass, for shadcn.

Frosted surfaces over a living aurora, iOS-grade controls and data pieces — installed as source with the shadcn CLI, themed entirely with CSS variables.

pnpm dlx shadcn@latest add https://glasscn.app/r/glass-style.json https://glasscn.app/r/theme-dusk.json

Browse components Make it yours

Today

Three rings, closing as the day goes.

Chain: 18 of 25 nights
This week: 3 of 7
Kept: 118%

Chain

311

Nights

12%

71%

Kept

Sleep

7.2 hours last night

Last 39 weeks

Every night written, brighter when the promise was kept.

Mon

Wed

Fri

Sun

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

LessMore

shadcn's APIs, in glass

Button, Card, Dialog, Tabs… keep their props and parts. Swapping is an import path: @/components/ui → @/components/glass.

Tokens all the way down

Frost, rim, blur, saturation, aurora — every one a CSS variable. Two hooks (--glass-bg, --glass-elevation) restyle any surface from a class.

Web and React Native

Every component has a native-* twin for Expo: one React Native file for iOS, Android and the web. Liquid Glass on iOS 26, blur on older iOS, a fill on Android.

Controls that feel like iOS

Sliding thumbs, springy switches, squash on press. Try them.

Evening reminder

Intensity 62%

KeptWorkDraft

Put together, it’s an app

A player, an inbox, a project wired to every overlay, a composer, pricing — nothing here but glasscn parts.

Slow Tide

Harbour Lights · Night Swims

Lossless

1:18-2:16

Inbox

3 unread

Today

Small things, every day.

2/4

Ten minutes of reading

Walk before lunch

No screens after 10

Write one line tonight

2 to go12-day chain

Aurora redesign

Ships in 9 days · 64% done

MKJRAC

Tonight

What went well today?

0 / 280

Lisbon

21°

Partly sunny · H 22° L 13°

6 AMNoon6 PM

MonthlyYearlySave 20%

Solo

Everything to start.

$0/ month

Unlimited entries
All palettes
Sync on one device

Plus Popular

For the long run.

$4.80/ month, billed yearly

Everything in Solo
Sync everywhere
Insights & exports

Data that wears the theme

Charts, meters and lists with no colours of their own — switch palettes and they follow.

Sleep stages

Hours per night, last 10 nights

Deep
REM
Light

Hours of deep, REM and light sleep per night over the last 10 nights, stacked
	Deep	REM	Light
Sep 29	1.2h	1.6h	3.9h
Sep 30	1.0h	1.4h	3.6h
Oct 1	1.4h	1.8h	4.1h
Oct 2	1.3h	1.9h	4.3h
Oct 3	0.9h	1.2h	3.4h
Oct 4	1.5h	2.0h	4.4h
Oct 5	1.6h	2.1h	4.2h
Oct 6	1.3h	1.7h	3.8h
Oct 7	1.4h	1.9h	4.0h
Oct 8	1.5h	2.0h	4.1h

Where the minutes went

Active time this week. Tap a slice to see it in the middle.

535minutes

Run165 min · 31%
Strength85 min · 16%
Yoga105 min · 20%
Walk140 min · 26%
Swim40 min · 7%

Active minutes this week by activity, 535 minutes in all
	Value	Share
Run	165 min	31%
Strength	85 min	16%
Yoga	105 min	20%
Walk	140 min	26%
Swim	40 min	7%

Morning run22 of 30 days

Sep 1Sep 30

HabitDays this month

Walk 8k steps26/30
Read 20 pages22/30
Lights out by 1119/30
Strength session12/30
Meditate8/30

78Recovery

5.2hof 8h

Training

Minutes this week · 395 total

Run
Strength
Yoga

Minutes of running, strength and yoga per day this week, stacked
	Run	Strength	Yoga
Mon	32 min	0 min	15 min
Tue	0 min	45 min	0 min
Wed	41 min	0 min	20 min
Thu	0 min	40 min	10 min
Fri	28 min	0 min	0 min
Sat	64 min	0 min	25 min
Sun	0 min	0 min	35 min

Sleepavg 7.5

7.4 hours

This week

Compared with last week.

Chain

12.5K

Pages read

12%

vs last week

To fall asleep

71%

Kept

Half a year of nights

A heatmap that tints with the palette.

Mon

Wed

Fri

Sun

Apr

May

Jun

Jul

Aug

Sep

Oct

Tap a night

LessMore

64%

3/10

Training log

Four weeks of sessions. Filter by activity, hide columns, click a row to open it.


Wed, Oct 7	Run	42 min	7.8 km	7/10
Tue, Oct 6	Yoga	30 min	—	3/10
Mon, Oct 5	Ride	95 min	38.4 km	6/10
Sun, Oct 4	Strength	50 min	—	8/10 · hard
Sat, Oct 3	Walk	35 min	3.1 km	2/10
Fri, Oct 2	Swim	40 min	1.6 km	6/10
Thu, Oct 1	Run	58 min	10.2 km	8/10 · hard
Wed, Sep 30	Yoga	25 min	—	2/10
Tue, Sep 29	Strength	45 min	—	7/10
Mon, Sep 28	Ride	120 min	51.7 km	7/10

28 rows

Page 1 of 3

One component, any theme

ThemeScope themes a subtree: six palettes, materials and shapes on one page, from CSS variables alone.

ocean

vivid · round

12 nights68%

cherry

crystal · sharp

12 nights68%

sage

matte · soft

12 nights68%

amber

vapor · round

12 nights68%

graphite

smoked · square · dark

12 nights68%

midnight

neon · soft · dark

12 nights68%

A chat, out of the box

Threads, bubbles, typing states, suggestions and a composer — it owns no messages and no networking, just glass.

Kai

Your evening coach

Today

Morning, Sam. Three evenings in a row — your longest run since March.

Want to set tonight's intention while it's fresh?

Yes — something small.

Last week I aimed too big and skipped two nights.

Read 8:14 AM

Small is the point. One line before bed: what went well today?

Mood & energy

Evening check-ins, last 14 days. Tap a day to pin it.

Mood
Energy

Mood and energy check-ins over the last 14 days, scored 1 to 10
	Mood	Energy
Sep 24	6/10	5/10
Sep 25	7/10	6/10
Sep 26	5/10	4/10
Sep 27	6/10	6/10
Sep 28	8/10	7/10
Sep 29	8/10	8/10
Sep 30	7/10	6/10
Oct 1	6/10	5/10
Oct 2	5/10	–
Oct 3	7/10	6/10
Oct 4	7/10	7/10
Oct 5	8/10	7/10
Oct 6	9/10	8/10
Oct 7	8/10	8/10

Readiness62

Low · Fair · Good · Peak

Blocks

Whole screens, ready to wire up: analytics, Settings and sign-in — plus the dashboard and chat above.

Active minutes

847 min

vs the 14 days before

Active days

14 of 14

20+ minutes

Strength share

26%

of all training

Active minutes

By kind of training, per day

Cardio
Strength
Mobility

Active minutes per day over the last 14 days, stacked by cardio, strength and mobility
	Cardio	Strength	Mobility
Sep 25	57 min	23 min	8 min
Sep 26	43 min	16 min	8 min
Sep 27	49 min	15 min	5 min
Sep 28	23 min	2 min	4 min
Sep 29	6 min	11 min	15 min
Sep 30	30 min	21 min	15 min
Oct 1	30 min	20 min	14 min
Oct 2	50 min	28 min	14 min
Oct 3	62 min	18 min	3 min
Oct 4	31 min	6 min	4 min
Oct 5	27 min	11 min	9 min
Oct 6	18 min	7 min	9 min
Oct 7	10 min	17 min	18 min
Oct 8	46 min	29 min	15 min

The mix

Last 14 days

14hactive

Cardio
Strength
Mobility

Active minutes by kind over the last 14 days, 847 in all
	Value	Share
Cardio	482 min	57%
Strength	224 min	26%
Mobility	141 min	17%

Recovery

Ready to train hard

78goal 70

Top habits

Days kept this month

Walk 8k steps26/30
Read 20 pages22/30
Lights out by 1119/30
Strength session12/30
Meditate8/30

Recent sessions

The last eight


Oct 8	Run	42 min
Oct 7	Yoga	30 min
Oct 6	Ride	95 min
Oct 5	Strength	50 min
Oct 4	Walk	35 min

8 rows

Page 1 of 2

Account

Evening

Remind me to write

Reminder time9:00 PM

One quiet nudge each evening. Silent while the app is open.

Appearance

Frost 28px

Welcome back

New here? Create an account

Day 401 of 1,826

Small gains, every night.

Name what mattered today and decide how it changes tomorrow. Keep the gains small and let them compound.

401

nights written · 22.0% of the way

Tonight’s promise

“Breathe twice before engaging.”

One question at a time
Carry one answer with carryId
Read the method

Set in your theme’s type — try a type preset in the studio.

Time

PaletteDusk

Changes save instantly.

Wind-down · Rain on tin — 12 min left

On today — drag across the bar to scrub

Every component, live

All 83 components, grouped as in the docs. Each tile is the real demo — open one for props and source.

Three blobs, drifting slowly.

Auroraaurora

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

Glass on a mesh

Liquid Glass reads best over real content.

Backdropbackdrop

A ground for glass besides the aurora: a photo with an optional scrim, a muted looping video (paused under reduced motion), a palette mesh, or a fine noise.

Subtle

Default

Strong

Tinted

Flat — no drop shadow

Thursday · Field notes

A week on the coast

Up before the light again. The tide was out far enough to walk to the rocks, and the wind dropped just as the sun cleared the dunes.

Wrote three pages at the café by the harbour. Kept the promise to stop at nine. Tomorrow: the lighthouse path, and no phone until noon.

Scroll — the toolbar and the dock stay legible over whatever passes beneath, because they are liquid glass and the article is not.

Regular — over content. One prominent action.

0:42

2:05

Clear — over media only, with a dim. Never beside regular.

Glassglass

A glass pane — material (content) or liquid (control layer, regular or clear). Intensity, tint and elevation variants; asChild.

Tonight’s reflection

Two questions, a few minutes.

What was the most significant thing that happened today?

Evening walk

A thick pane, a hero image.

Solid material

Opaque card colour for long tables and dense dashboards.

Cardcard

shadcn's Card API on glass: header, title, description, action, content, footer, a hero image — regular, thick or solid material, and asChild for a pressable link card.

Ocean · vivid