Components
Tabs
Tabs navigation primitives.
Use Tabs to switch between panes of content.
Account preferences live here.
Settings live here.
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@tile-ui/react';
export default function TabsDemo() {
return (
<Tabs defaultValue="account">
<TabsList>Registry install
pnpm dlx shadcn@latest add @tile-ui/tabsPackage usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@tile-ui/react';
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="account">Account content.</TabsContent>
<TabsContent value="settings">Settings content.</TabsContent>
</Tabs>Highlights
- List, trigger, and content
- Controlled and uncontrolled
- Horizontal and vertical
Registry dependencies
| Item | Purpose |
|---|---|
tabs | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Tabs
| Prop | Type | Default |
|---|---|---|
value | string | — |
defaultValue | string | — |
onValueChange | (value: string) => void | — |
orientation | 'horizontal' | 'vertical' | — |
TabsList
| Prop | Type | Default |
|---|---|---|
variant | 'default' | 'line' | — |
TabsTrigger
| Prop | Type | Default |
|---|---|---|
value | string | — |
disabled | boolean | — |
TabsContent
| Prop | Type | Default |
|---|---|---|
value | string | — |