Skip to content
All 6 kits from $99 · Everything Bundle $149

Tabs

LayoutWeb + NativeMIT
View in Storybook

Tabs that switch between related views on one screen, with arrow-key, Home and End navigation.

bun add @otfdashkit/ui

Preview

Tabs
Loading Storybook preview…

Code

import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Input } from '@otfdashkit/ui'

export function Example() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
            <CardDescription>Make changes to your account here.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <label className="text-sm font-medium">Name</label>
              <Input defaultValue="John Doe" />
            </div>
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
            <CardDescription>Change your password here.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <label className="text-sm font-medium">Current password</label>
              <Input type="password" />
            </div>
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader>
            <CardTitle>Settings</CardTitle>
            <CardDescription>General app settings.</CardDescription>
          </CardHeader>
          <CardContent>
            <Button>Save preferences</Button>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Questions

How do I use shadcn tabs with OTF's React SDK?
Import Tabs, TabsList, TabsTrigger, and TabsContent from @otfdashkit/ui. Set defaultValue on Tabs and give each trigger and panel the same value; the live example shows the pattern.
Can I control which tab is active?
Yes. Use defaultValue for an initial selection, or pass value and onValueChange to keep the selected tab in your React state.
What keyboard controls move between tabs?
Use the arrow keys to move focus between triggers; Home and End move to the first and last trigger. In the default automatic mode, the associated panel activates as focus changes.