Shadcn UI

Shadcn UI takes a different approach to component libraries: instead of installing a package and importing components from it, Shadcn copies the component source code directly into your project. This means you own the code and can change anything you want without fighting an external dependency.

StackKit runs the official Shadcn setup for you and gets it configured with Tailwind CSS.

Compatible frameworks

Shadcn UI is available for Next.js and React (Vite) projects.

Installation

In a new project

npx stackkit@latest create my-app --framework nextjs --ui shadcn

npx stackkit@latest create my-app --framework react --ui shadcn

In an existing project

npx stackkit@latest add
# Navigate to: UI → Shadcn UI

What gets generated

StackKit runs shadcn@latest init during installation, so you get the exact same output as the official Shadcn setup:

• components/ui/ — The directory where all Shadcn components will live. A button component is added as a starter.
• lib/utils.ts — The cn() utility function that merges Tailwind classes.
• Updated tailwind.config — Content paths and CSS variables configured for Shadcn.
• Updated global CSS — CSS custom properties for the Shadcn color palette.

Adding more components

After setup, you can add any Shadcn component using the official CLI:

npx shadcn@latest add <component>

Examples:

npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add input
npx shadcn@latest add table
npx shadcn@latest add form

Browse the full list at ui.shadcn.com/components.

Using the Button component

The starter button component is added during setup. Here's how to use it:

import { Button } from "@/components/ui/button";

export default function Page() {
  return (
    <div>
      <Button>Click me</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button size="sm">Small</Button>
    </div>
  );
}

Customizing components

Because the component files live in your project, you can edit them directly. Open components/ui/button.tsx and make any changes you need:

// Change the default variant, add a new one, adjust styles — it's all yours.
const buttonVariants = cva(
  "inline-flex items-center ...",
  {
    variants: {
      variant: {
        default: "bg-primary ...",
        // Add your own variant here:
        brand: "bg-purple-600 text-white hover:bg-purple-700",
      },
    },
  }
);

Next steps

• Components module — Pre-built advanced components like DataTable and TiptapEditor
• Troubleshooting — Common issues