Tabs

Вкладки на shadcn / Radix Tabs. Compound-набор: Tabs / TabsList / TabsTrigger / TabsContent. Активная вкладка задаётся через defaultValue (uncontrolled) либо через value + onValueChange (controlled). Стиль списка переключается пропом variant ("default" — с заливкой, "line" — с подчёркиванием), а orientation располагает список сверху или сбоку.

Variants — готовые конфигурации компонента: один и тот же компонент с разными преднастроенными пропсами. Витрина состояний (напр. обычный Select и Select с расширенной информацией — два варианта).

Examples — приёмы в коде: как решить задачу. Напр. как разные Data Provider’ы работают с компонентом (рецепты использования).

Список с заливкой (bg-muted). Активная вкладка выделяется фоном. defaultValue задаёт стартовую вкладку.

Загрузка демо…

variant="line" на TabsList — без заливки, активная вкладка помечается нижней линией.

Загрузка демо…

orientation="vertical" — список вкладок располагается сбоку от контента.

Загрузка демо…