Installation

Vitrum distributes through the shadcn CLI: components land as source files in your project, with the material system arriving automatically alongside the first one.

1. Start from a Tailwind v4 project

Any React framework the shadcn CLI supports works. If you are starting fresh:

pnpm create next-app@latest my-app --ts --tailwind --app
cd my-app
pnpm dlx shadcn@latest init

2. Add a component

Install any component by URL. Its dependencies — the theme stylesheet, the glass primitive, behavioral packages — resolve transitively.

pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/button.json

3. Import the stylesheet

The theme lands at vitrum.css in your project root. Import it once in your global CSS, after Tailwind:

@import "tailwindcss";
@import "../vitrum.css";

4. Enable refraction

Render <GlassRoot/> once at the top of <body>. It resolves the rendering engine before first paint and mounts the shared refraction filters. Skip it and every surface renders in the frost engine — fully styled, no refraction.

app/layout.tsx

import { GlassRoot } from "@/components/ui/glass-root";

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

Requirements

Tailwind CSS v4 — the material tokens use its theme layer.
React 19 or later.
Dark mode via a .dark class (the shadcn init default).