glasscn
A shadcn-compatible registry of glass components: frosted surfaces over an animated aurora, iOS-style controls and data pieces. You install them as source with the shadcn CLI and theme them with CSS variables. Every component and block also has a React Native version.
pnpm dlx shadcn@latest add https://glasscn.app/r/glass-style.json https://glasscn.app/r/theme-dusk.json
pnpm dlx shadcn@latest add https://glasscn.app/r/card.json https://glasscn.app/r/button.json
Or set the namespace once in components.json and add items by name:
"registries": { "@glasscn-app": "https://glasscn.app/r/{name}.json" }
pnpm dlx shadcn@latest add @glasscn-app/dock
What's in it
| Items |
|---|
| Foundation | glass-style (101 primitives, glass / glass-strong / glass-subtle and the liquid-layer utilities, theme tokens, keyframes, fallbacks, glassVariants); glass-theme (the theme engine); glass-charts; use-sliding-indicator; use-glass-pointer |
| Palettes (12) | theme-dusk -ocean -rose -sage -amber -graphite -lavender -mint -cherry -lagoon -sand -midnight |
| Materials (7) | material-frosted -vivid -crystal -smoked -matte -vapor -neon |
| Shape · Motion · Density | shape-round -soft -sharp -square · motion-spring -smooth -snappy -still · density-compact -default -comfortable |
| Surfaces | aurora glass card theme-scope |
| Controls | button badge input textarea label checkbox switch segmented-control tabs slider progress kbd separator avatar glass-preferences |
| Overlays | dialog sheet popover tooltip dropdown-menu toaster |
| Navigation | dock grouped-list |
| Data | activity-rings progress-ring sparkline stat heatmap bar-list gauge tracker category-bar |
| Charts | chart area-chart bar-chart line-chart donut-chart (TanStack Charts) |
| Tables | table data-table (TanStack Table v9) |
| Chat | chat |
| Blocks | dashboard-01 analytics-01 settings-01 auth-01 chat-01 |
| React Native | native-tokens native-glass native-aurora native-press native-ui, plus a native-<name> twin of every component and block (iOS, Android and web through react-native-web) |
Components that shadcn also has (Button, Card, Dialog, Tabs and so on) keep shadcn's props and parts, so switching is an import change from @/components/ui/x to @/components/glass/x. Files land in components/glass/, next to shadcn's, and never overwrite them.
The theme is 101 primitives in eleven groups: colour, material (frost, blur, saturation, brightness, sheen, grain), rim, depth (shadow, inner glow), shape, density, motion, aurora, fonts and type. Presets compose. You can override any primitive on any element ([--glass-blur:8px]), and ThemeScope re-themes a subtree at runtime.
The Theme Studio at /themes has a control for every primitive, a hue-harmony palette generator, randomise, a scoped live preview with its own scheme and a legibility estimate. It exports a one-line npx shadcn add command, CSS, a shadcn theme item, TypeScript or a share link, and can apply the theme to the whole site.
Every part has data-slot. Components use cva variants, cn, the unified radix-ui package, asChild and Tailwind v4, respect prefers-reduced-motion, and fall back to a 92% opaque tint where backdrop-filter isn't supported.
For agents and contributors
docs/architecture.md: how the pipeline, tokens and registry fit togetherdocs/rules/: design, components, tokens, registry, accessibility, performance, nativeskills/: build-glass-component, extend-theme, ship-registry, port-to-native, use-glasscn (mirrored into .claude/skills and .agents/skills on pnpm install)
Develop
pnpm install
pnpm dev # generate + docs site (registry served from /r; install commands follow the dev port)
registry/items.mjs: every item (edit this, not registry.json)src/lib/glass-theme.ts: the theme engine, with the schema of every primitive, palettes and presets, the generator and exports (ships as glass-theme)registry/stylesheet.mjs: utilities and Tailwind tokens, all derived from primitivessrc/components/glass/*: web componentssrc/components/blocks/*: blocksregistry/native/*: React Nativesrc/components/demos/*: one live example per item (shown as "Code" in the docs)
Check
pnpm typecheck
pnpm lint
pnpm test # theme engine, chart maths, registry integrity (files, deps, unique names, no derived primitives)
pnpm verify:install # fresh Next app → shadcn init → add every web item, presets and a local exported theme → tsc → next build
pnpm verify:native # native items from the registry into a copy of the sandbox → tsc
pnpm sandbox:native # the Expo sandbox (sandbox/native): every native item live — i for iOS, w for web
CI (.github/workflows/ci.yml) runs typecheck, lint and test on every push and PR, then verify:install and the native sandbox checks (npm run typecheck in sandbox/native, verify:native).
Build and deploy
pnpm build generates, builds the registry into public/r and builds the docs site. Registry URLs are stamped from NEXT_PUBLIC_REGISTRY_URL, else https://glasscn.app on Vercel, else localhost. Spec: docs/spec.md.
License
MIT
