Guides

Installation

Three commands in any project that uses shadcn — Next.js, Vite, React Router, Astro, TanStack Start.

Set up shadcn

If the project doesn’t have a components.json yet:

pnpm dlx shadcn@latest init

Add the foundation and a palette

glass-style brings the tokens, the glass utilities and the keyframes. A theme sets the accent, ring, aurora and chart colours — pick one of six.

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

Add components

Each pulls in what it needs (the foundation, helpers, Radix) automatically.

pnpm dlx shadcn@latest add https://glasscn.app/r/aurora.json https://glasscn.app/r/card.json https://glasscn.app/r/button.json

Put the aurora behind everything

Glass needs something to frost. The aurora is fixed behind the page by default.

app/layout.tsx

import { Aurora } from "@/components/glass/aurora"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Aurora />
        {children}
      </body>
    </html>
  )
}

Use the @glasscn namespace

Add the registry to components.json once and install by name:

components.json

{
  "registries": {
    "@glasscn": "https://glasscn.app/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @glasscn/button @glasscn/dock @glasscn/activity-rings

Where files go

Components install to components/glass/* (beside shadcn’s components/ui, never over it), blocks to components/glass-blocks/*, helpers to lib/ and hooks/. Imports follow your components.json aliases. Class merging uses the cn package, like current shadcn.