Skip to content
glass

Installation

glass isn't a package. Each component is copied into your project as source, so you can change anything.

  1. 01

    Start from a Tailwind CSS v4 project

    Any React framework works. If shadcn isn't set up yet, initialise it once.

    npx shadcn@latest init
  2. 02

    Add a component

    The theme, the cn() helper, hooks and npm packages it needs come along automatically.

    npx shadcn@latest add https://ui-collections.vercel.app/r/glass/button.json
  3. 03

    Import the theme once

    Right after Tailwind in your global stylesheet: the shared base, then the glass theme.

    globals.css
    @import "tailwindcss";
@import "../styles/base.css";
@import "../styles/glass.css";
  4. 04

    Set the theme and its fonts

    Put data-theme="glass" on <html> and load the faces the theme expects.

    app/layout.tsx
    import { Geist } from "next/font/google";

const sans = Geist({ subsets: ["latin", "latin-ext"], variable: "--font-glass-sans" });

// <html data-theme="glass" className={sans.variable}>

Browse everything