Урок 16. Философия shadcn/ui: код, а не зависимость
⚡ Кратко
shadcn/ui — не библиотека компонентов, а реестр исходников.
Команда npx shadcn add button не ставит пакет, а копирует файл
button.tsx в ваш проект: дальше это ваш код, который можно
править как угодно. Поведение и доступность обеспечивают примитивы
(Base UI по умолчанию), внешний вид — Tailwind.
О чём этот урок
Прежде чем ставить и настраивать, стоит понять, почему shadcn/ui устроен именно так и в каких случаях этот подход выигрывает у обычной библиотеки компонентов. Разберём идею реестра, роль примитивов, честную цену владения кодом и сравним с MUI, Chakra и Bootstrap.
Все факты урока проверены реальным прогоном CLI версии 4.x: именно так сегодня выглядят команды, конфигурация и исходники компонентов.
Структура урока
Теория
Реестр вместо пакета, примитивы, цена владения.
Справочник
Термины и карта команд CLI.
Примеры
Что именно попадает в проект и как это выглядит.
Старый vs Новый
Библиотека-зависимость против копии исходников.
Задания
Выбрать подход под проект.
Решения
Разбор с аргументами.
Ошибки
Ожидание «библиотеки», страх править код, слепое обновление.
Домашнее задание
Сравнительный анализ для своего проекта.
Ресурсы
Документация и исходники.
Практика
- Откройте страницу компонента в документации shadcn/ui и найдите его исходник.
- Сформулируйте, что в вашем проекте будет проще, а что сложнее с таким подходом.
- Проверьте, работает ли выбранный компонент с клавиатуры.