Installation

Set up QuartzUI on top of shadcn/ui with a few commands. Follow the steps in order and you’ll be ready to drop components into your app.

You’ll need Node.js 18+ with your package manager (pnpm, npm, or yarn) and a Next.js/React project with Tailwind (or start fresh with npx create-next-app).

  1. 1

    Install shadcn/ui

    Run the shadcn setup to scaffold the expected folders and tokens.

    typescript-icon
    1npx shadcn@latest init

    Choose your styling options; the init will create components and lib paths that QuartzUI components reference.

  2. 2

    Align Tailwind

    Confirm tailwind.config.(cjs|ts) includes your components, app, and src paths in content.

    Ensure globals.css (or app/globals.css) has @tailwind base/components/utilities.

    If you customized tokens during shadcn init, keep them—QuartzUI uses the same design token structure.

  3. 3

    Add QuartzUI components

    From any component page, choose the CLI command or copy/paste the code.

    typescript-icon
    1npx shadcn@latest add http://localhost:3000/r/button.json

    Repeat for other QuartzUI components you want to pull in.

  4. 4

    Verify

    Run pnpm dev (or npm run dev / yarn dev) and open a page using your new component.

    If styles look off, re-check Tailwind content paths and ensure globals are imported once in your root layout.

That’s it—shadcn/ui is initialized and QuartzUI components are ready to use.