Урок 18. Анатомия компонента shadcn/ui

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

⚡ Кратко

Компонент реестра состоит из четырёх частей: примитив (поведение), cva (варианты), cn() (слияние классов) и data-slot (метка части). Разберём настоящий исходник Button построчно и научимся его расширять, не ломая.

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

Это ключевой урок второй половины курса: после него вы сможете читать любой компонент реестра и уверенно его менять. Разбираем настоящий файл button.tsx, добавляем свой вариант, объясняем непривычные конструкции вроде [&_svg]:size-4 и has-data-[icon=inline-end]:pr-2.

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

Теория

Построчный разбор Button и приёмы, которые в нём используются.

Справочник

Конструкции внутри компонентов реестра.

Примеры

Расширение компонента: свой вариант, размер, иконки.

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

asChild и Slot против render.

Задания

Прочитать и дополнить компонент.

Решения

Готовый код с пояснениями.

Ошибки

Порядок className, потеря примитива, лишние обёртки.

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

Свой компонент по канону реестра.

Ресурсы

Документация примитивов и cva.

Практика

  • Откройте src/components/ui/button.tsx в своём проекте и найдите все четыре части.
  • Добавьте вариант brand и размер xl.
  • Проверьте, что className снаружи по-прежнему побеждает.

Навигация