Tabs

Tabbed interface via Radix UI

Default

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@tryvienna/ui'

<Tabs defaultValue="account" className="w-96">
  <TabsList className="w-full">
    <TabsTrigger value="account" className="flex-1">
      Account
    </TabsTrigger>
    <TabsTrigger value="password" className="flex-1">
      Password
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <div className="grid gap-4 pt-4">
      <div className="grid gap-2">
        <Label htmlFor="tab-name">Name</Label>
        <Input id="tab-name" defaultValue="Will" />
      </div>
      <Button>Save</Button>
    </div>
  </TabsContent>
  <TabsContent value="password">
    <div className="grid gap-4 pt-4">
      <div className="grid gap-2">
        <Label htmlFor="tab-pw">Current password</Label>
        <Input id="tab-pw" type="password" />
      </div>
      <Button>Update</Button>
    </div>
  </TabsContent>
</Tabs>

Examples

Default

Default

<Tabs defaultValue="account" className="w-96">
  <TabsList className="w-full">
    <TabsTrigger value="account" className="flex-1">
      Account
    </TabsTrigger>
    <TabsTrigger value="password" className="flex-1">
      Password
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <div className="grid gap-4 pt-4">
      <div className="grid gap-2">
        <Label htmlFor="tab-name">Name</Label>
        <Input id="tab-name" defaultValue="Will" />
      </div>
      <Button>Save</Button>
    </div>
  </TabsContent>
  <TabsContent value="password">
    <div className="grid gap-4 pt-4">
      <div className="grid gap-2">
        <Label htmlFor="tab-pw">Current password</Label>
        <Input id="tab-pw" type="password" />
      </div>
      <Button>Update</Button>
    </div>
  </TabsContent>
</Tabs>

Three Tabs

Three Tabs

<Tabs defaultValue="overview" className="w-96">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <p className="text-sm text-muted-foreground pt-4">Overview content.</p>
  </TabsContent>
  <TabsContent value="analytics">
    <p className="text-sm text-muted-foreground pt-4">Analytics content.</p>
  </TabsContent>
  <TabsContent value="reports">
    <p className="text-sm text-muted-foreground pt-4">Reports content.</p>
  </TabsContent>
</Tabs>

API Reference

Tabs

Also accepts all props from TabsPrimitive.Root.

TabsList

Also accepts all props from TabsPrimitive.List.

TabsTrigger

Also accepts all props from TabsPrimitive.Trigger.

TabsContent

Also accepts all props from TabsPrimitive.Content.

Data Attributes

Component	data-slot
Tabs	"tabs"
TabsList	"tabs-list"
TabsTrigger	"tabs-trigger"
TabsContent	"tabs-content"