Dinachi

Tabs

A set of layered sections of content, known as tab panels, displayed one at a time.

View Source

#Installation

npx @dinachi/cli@latest add tabs

#Usage

tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

#Examples

Default Tabs

Basic tabs with multiple panels

Account

Manage your account settings and preferences.

Controlled Tabs

Tabs with controlled active state

Overview content for your dashboard.

Active tab: overview

Tabs with Indicator

Tabs with an animated indicator bar

Browse your music library.

Disabled Tab

Tabs with a disabled tab trigger

Active content is visible here.

#API Reference

PropTypeDefaultDescription
defaultValuestring—The value of the tab to select by default
valuestring—The controlled value of the currently active tab
onValueChange(value: string) => void—Callback fired when the active tab changes