Navigation

Tabs

Tabbed content switcher with keyboard navigation.

Available inreactangular

Preview

Live previewreal component

12 tools exposed by this server.

Install

TerminalBash
npx @mcp-elements/cli add tabs

Usage

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

PropTypeDefaultDescription
defaultValuestringThe value of the tab selected by default
valuestringControlled selected tab value
onValueChange(value: string) => voidCalled when the selected tab changes
orientation'horizontal' | 'vertical''horizontal'Layout direction of the tab list