🧩 Каталог компонентов shadcn/ui

Компоненты реестра, команды установки и выбор под задачу

Как пользоваться каталогом

Каждая строка — элемент реестра. Команда копирует исходник в src/components/ui/; дальше это ваш код. Посмотреть исходник до установки: npx shadcn@latest view button.

Компонент можно добавить сразу с зависимостями: например, Dialog подтянет Button, если его ещё нет.

Компоненты

Компонент	Команда	Что это	Где применяют
Accordion	`npx shadcn@latest add accordion`	Раскрывающиеся секции	FAQ, длинные настройки
Alert	`npx shadcn@latest add alert`	Сообщение в потоке страницы	предупреждения, статусы
Alert Dialog	`npx shadcn@latest add alert-dialog`	Диалог, требующий явного ответа	подтверждение удаления
Avatar	`npx shadcn@latest add avatar`	Аватар с запасным текстом	пользователи, команды
Badge	`npx shadcn@latest add badge`	Метка состояния	статусы, счётчики
Breadcrumb	`npx shadcn@latest add breadcrumb`	Хлебные крошки	навигация в глубоких разделах
Button	`npx shadcn@latest add button`	Кнопка с вариантами и размерами	везде
Calendar	`npx shadcn@latest add calendar`	Календарь выбора даты	фильтры, бронирование
Card	`npx shadcn@latest add card`	Карточка из подкомпонентов	блоки дашборда
Carousel	`npx shadcn@latest add carousel`	Горизонтальная лента	галереи
Chart	`npx shadcn@latest add chart`	Обёртки для графиков на токенах темы	аналитика
Checkbox	`npx shadcn@latest add checkbox`	Чекбокс	формы, фильтры
Collapsible	`npx shadcn@latest add collapsible`	Сворачиваемый блок	детали записи
Command	`npx shadcn@latest add command`	Палитра команд с поиском	быстрый доступ, ⌘K
Dialog	`npx shadcn@latest add dialog`	Модальное окно	формы, подтверждения
Drawer	`npx shadcn@latest add drawer`	Панель снизу	мобильные действия
Dropdown Menu	`npx shadcn@latest add dropdown-menu`	Выпадающее меню	действия строки, профиль
Field	`npx shadcn@latest add field`	Обвязка поля формы	все формы
Hover Card	`npx shadcn@latest add hover-card`	Карточка по наведению	превью профиля
Input	`npx shadcn@latest add input`	Текстовое поле	формы
Input OTP	`npx shadcn@latest add input-otp`	Ввод одноразового кода	двухфакторная аутентификация
Label	`npx shadcn@latest add label`	Подпись поля	формы
Menubar	`npx shadcn@latest add menubar`	Строка меню	приложения-редакторы
Navigation Menu	`npx shadcn@latest add navigation-menu`	Навигация с подменю	шапка сайта
Pagination	`npx shadcn@latest add pagination`	Постраничная навигация	списки, таблицы
Popover	`npx shadcn@latest add popover`	Всплывающий блок	подсказки с содержимым
Progress	`npx shadcn@latest add progress`	Индикатор выполнения	загрузки, лимиты
Radio Group	`npx shadcn@latest add radio-group`	Группа радиокнопок	выбор одного варианта
Resizable	`npx shadcn@latest add resizable`	Изменяемые панели	редакторы, IDE-подобные экраны
Scroll Area	`npx shadcn@latest add scroll-area`	Своя область прокрутки	списки в панелях
Select	`npx shadcn@latest add select`	Выпадающий список	формы
Separator	`npx shadcn@latest add separator`	Разделитель	меню, карточки
Sheet	`npx shadcn@latest add sheet`	Боковая панель	фильтры, мобильное меню
Sidebar	`npx shadcn@latest add sidebar`	Готовый каркас боковой панели	дашборды
Skeleton	`npx shadcn@latest add skeleton`	Заглушка загрузки	любые данные
Slider	`npx shadcn@latest add slider`	Ползунок	диапазоны, громкость
Sonner	`npx shadcn@latest add sonner`	Всплывающие уведомления	результаты действий
Switch	`npx shadcn@latest add switch`	Переключатель	настройки
Table	`npx shadcn@latest add table`	Таблица	списки данных
Tabs	`npx shadcn@latest add tabs`	Вкладки	разделы экрана
Textarea	`npx shadcn@latest add textarea`	Многострочное поле	формы
Toggle	`npx shadcn@latest add toggle`	Кнопка-переключатель	панели инструментов
Tooltip	`npx shadcn@latest add tooltip`	Короткая подсказка	иконки-кнопки

⚠️ Проверить по документации: состав реестра пополняется. Актуальный список — npx shadcn@latest search или раздел Components на ui.shadcn.com.

Что выбрать под задачу

Задача	Компонент
Подтвердить необратимое действие	`AlertDialog`
Короткая форма поверх страницы	`Dialog`
Фильтры на мобильном	`Sheet` или `Drawer`
Действия над строкой списка	`DropdownMenu`
Выбор одного значения из списка	`Select`
Выбор одного из 2–4 вариантов	`RadioGroup` или `Tabs`
Включить или выключить настройку	`Switch`
Пояснение к иконке	`Tooltip`
Сообщение о результате	`Sonner`
Данные ещё грузятся	`Skeleton`
Каркас дашборда	`Sidebar`
Быстрый поиск по приложению	`Command`

Как выглядят основные компоненты

Демонстрации собраны на тех же токенах темы, что и настоящие компоненты.

Badge Badge outline

Card

Заголовок, описание и содержимое

Input и Label

<div class="space-y-4">
  <div class="flex flex-wrap items-center gap-2">
    <button class="inline-flex h-8 items-center justify-center rounded-lg bg-primary px-2.5 text-sm font-medium text-primary-foreground">Button</button>
    <span class="inline-flex h-5 items-center rounded-4xl bg-primary px-2 text-xs font-medium text-primary-foreground">Badge</span>
    <span class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-medium">Badge outline</span>
    <div class="size-8 rounded-full bg-muted"></div>
  </div>
  <div class="rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-border">
    <div class="grid gap-1 px-4"><p class="text-base font-medium">Card</p><p class="text-muted-foreground">Заголовок, описание и содержимое</p></div>
    <div class="mt-3 flex justify-end gap-2 border-t border-border px-4 pt-3">
      <button class="inline-flex h-8 items-center justify-center rounded-lg px-2.5 text-sm font-medium hover:bg-muted">Отмена</button>
      <button class="inline-flex h-8 items-center justify-center rounded-lg bg-primary px-2.5 text-sm font-medium text-primary-foreground">ОК</button>
    </div>
  </div>
  <div class="flex flex-col gap-1.5">
    <label class="text-sm font-medium" for="ref-input">Input и Label</label>
    <input id="ref-input" placeholder="Введите значение" class="h-8 w-full max-w-sm rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
  </div>
  <div class="space-y-2">
    <div class="h-4 w-40 animate-pulse rounded-md bg-muted"></div>
    <div class="h-4 w-full max-w-sm animate-pulse rounded-md bg-muted"></div>
  </div>
</div>