Telepítés és setup

Telepítés és setup

Előfeltételek

• Next.js 13+ (App Router ajánlott) vagy Vite + React
• Tailwind CSS konfigurálva
• TypeScript ajánlott
• Node.js 18+

Init

npx shadcn-ui@latest init

A CLI kérdéseket tesz fel (style, baseColor, globális CSS fájl, aliasok, RSC).

Mit csinál az init?

• frissíti a Tailwind konfigurációt
• frissíti a globális CSS-t (CSS változók)
• létrehozza a components/ui/ mappát
• létrehozza a lib/utils.ts-t
• létrehozza a components.json-t

components.json példa

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Komponens hozzáadása

npx shadcn-ui@latest add button
npx shadcn-ui@latest add input dialog dropdown-menu

Rövid összefoglaló

• init felállítja a project konvenciókat és a shadcn struktúrát.
• add a komponens forrását bemásolja a projektbe.