Урок 17. Домашнее задание: проект на shadcn/ui

Шаг 1. Алиасы

// vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

// tsconfig.json — и то же самое в tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Продублируйте baseUrl и paths в tsconfig.app.json.

Шаг 2. Инициализация

npx shadcn@latest init

Прочитайте git diff src/index.css — там появятся токены темы. Сравните их с теми, что вы описывали вручную в уроке 13.

Шаг 3. Компоненты

npx shadcn@latest add button card input label badge separator skeleton table

Шаг 4. Замена

Удалите свои Button и Badge из урока 15, поправьте импорты. Сравните строки: у реестра вариантов больше, состояния описаны подробнее, но идея та же — cva плюс cn().