Navigation
Tabs
Tabbed content switcher with keyboard navigation.
Available in
reactangularPreview
Live previewreal component
12 tools exposed by this server.
Install
TerminalBash
npx @mcp-elements/cli add tabsUsage
tabs-example.tsxTSX
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@mcp-elements/react'
export function Example() {
return (
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="usage">Usage</TabsTrigger>
<TabsTrigger value="props">Props</TabsTrigger>
</TabsList>
<TabsContent value="overview">Overview content</TabsContent>
<TabsContent value="usage">Usage content</TabsContent>
<TabsContent value="props">Props content</TabsContent>
</Tabs>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The value of the tab selected by default |
value | string | — | Controlled selected tab value |
onValueChange | (value: string) => void | — | Called when the selected tab changes |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the tab list |