Button
buttonКомпоненты
Мы берём готовые компоненты shadcn/ui и оформляем их в нашей теме. Собственных — только пять.
Из чего собран каждый экран
«ниже ↓» — работает на этой странице · остальные добавим, когда понадобятся- Каркас: боковая панель и верхняя строкаблок sidebar-07, Breadcrumb, Avatar, Dropdown Menu ↗ниже ↓
- Главная страница: сводка для каждой ролиблок dashboard-01: карточки с числом, график, таблица ↗
- Списки: ученики, заявки, оплатыData Table (Table + TanStack Table) ↗ниже ↓
- Поиск по всей системе, ⌘KCommand в Command Dialog, Kbd ↗
- Карточка ученика или заявки сбоку, на компьютереSheet, справа ↗ниже ↓
- Панель действий снизу, на телефонеDrawer ↗
- Подтвердить отправку, удаление, оплатуAlert Dialog; другие окна — Dialog ↗ниже ↓
- Формы: создать, изменитьField + Input, Select, Textarea, Checkbox, Radio Group, Switch ↗ниже ↓
- Выбор из многих: учитель, группа, кабинетCombobox (Popover + Command) ↗ниже ↓
- Даты, день расписанияCalendar, Date Picker ↗
- Графики: оплаты, посещаемость, баллыChart — один ряд чернилами и сравнение ↗
- Всплывающие уведомления и «Отменить» после сохраненияSonner ↗
- Разделы записи, настройкиTabs, Accordion, Separator ↗ниже ↓
- Статусы: оплачено, просрочено, готовоBadge (destructive — только красный сигнал) ↗ниже ↓
- Строки: входящие, уведомленияItem ↗
- Пусто, всё в порядкеEmpty ↗ниже ↓
- ЗагрузкаSkeleton, Spinner ↗ниже ↓
- Входблок login-03 ↗
- ЭкзаменRadio Group, Progress, Card, Pagination ↗ниже ↓
- Скрипт звонкаAccordion + Item + Kbd ↗ниже ↓
- Доска задач, перетаскиваниенет в shadcn/ui — dnd-kit с карточками Card ↗
В нашей теме
нажмите — каждый компонент работаетBadge
badgeРаботаетПилотЧерновикЖдёт подписи
Input
inputTextarea
textareaSelect
selectCheckbox
checkboxSwitch
switchRadio Group
radio-groupTabs
tabs12 задач
Dialog
dialogAlert Dialog
alert-dialogSheet
sheetDropdown Menu
dropdown-menuPopover
popoverTooltip
tooltipAccordion
accordionBreadcrumb
breadcrumbProgress
progressAvatar
avatarАКДНЮС
Skeleton
skeletonSeparator
separatorГруппыУченикиОплаты
Empty
emptyВсё в порядке
Нет задач, которые ждут вас. Проверено в 10:40.
Collapsible
collapsibleCard
cardПосещаемость
Эта неделя
92%
Table
table| Модуль | Статус |
|---|---|
| Расписание групп | в работе |
| Журнал оценок | готово |
| Счета и акты | ждёт подписи |
Пять собственных компонентов
делаем, когда они нужны продукту- 01
«Требует внимания»
Card + Item, один глагол на строку; Badge destructive — только просрочка; пусто — Empty «Всё в порядке»
- 02
Полоса этапов
список Badge (outline — пройдено, default — сейчас) через Separator, дата в Tooltip
- 03
Денежная лестница
Table: начислено → оплачено → долг, итог в TableFooter, долг — красным и словом
- 04
Итог экзамена
Card + Progress + Badge, вердикт словом, красный только при «не сдал»
- 05
Нижняя панель телефона
до 5 подписанных вкладок под 760 px: Button ghost с пунктами боковой панели