Урок 17. Установка shadcn/ui

📁 Раздел: shadcn/ui ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Порядок такой: проект на Vite → Tailwind → алиас @/ в vite.config.ts и tsconfig → npx shadcn@latest init → npx shadcn@latest add …. Команда init создаёт components.json, добавляет токены темы в CSS и функцию cn().

О чём этот урок

Полная установка с нуля и разбор каждого поля components.json. Всё, что здесь написано, получено реальным прогоном CLI 4.x на проекте Vite + React 19 + Tailwind 4.3 — включая вывод команд и содержимое созданных файлов.

Отдельно разберём алиасы путей: именно на них спотыкается большинство, и ошибка выглядит непонятно — «cannot find module @/lib/utils».

Структура урока

Теория

Что делает init, зачем алиасы, что появляется в проекте.

Справочник

Все ключи init и add, поля конфигурации.

Примеры

Установка по шагам с реальным выводом команд.

Старый vs Новый

Установка под Tailwind v3 и под v4.

Задания

Поставить и добавить компоненты.

Решения

Готовые команды и файлы.

Ошибки

Алиасы, порядок установки, перезапись правок.

Домашнее задание

Проект курса на shadcn/ui.

Ресурсы

Руководства по установке.

Практика

  • Настройте алиас @/ и проверьте, что импорт работает.
  • Запустите init и прочитайте, что именно он изменил.
  • Добавьте три компонента и посмотрите на созданные файлы.

Навигация