Getting Started

Installation

Set up Next.js, Tailwind CSS v4 and the foundation. Then add components one by one.

Create a project#

Start with a Next.js app that uses Tailwind CSS v4.

npx create-next-app@latest my-app --typescript --tailwind --app

Install the base dependencies used by almost every component.

npm install radix-ui class-variance-authority cn lucide-react tw-animate-css next-themes

Add the foundation#

Replace app/globals.css with the foundation file. It defines every color, radius, surface and motion token. The full file is on the Theming page.

app/globals.css

@import "tailwindcss";@import "tw-animate-css";@custom-variant dark (&:is(.dark *));@theme {  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);}:root {  --radius: 0.5rem;  --background: #ffffff;  --foreground: #0a0a0a;  --primary: #056dff;  --primary-highlight: #3c86ff;  /* ...see Theming for the full list */}

Add the cn helper#

Components merge class names with one small helper.

lib/utils.ts

export { cn } from "cn"

Add components#

Open any component page, install its dependencies and copy its source into components/ui. Then import it.

import { Button } from "@/components/ui/button"export default function Page() {  return <Button>Get started</Button>}