Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add tabs

Variants & Examples

Default Tabs

A basic set of tabs for organizing content.

Make changes to your account here.

Code for Default Tabs

1import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
2
3export function DefaultTabs() {
4  return (
5    <Tabs defaultValue="account" className="w-[400px]">
6      <TabsList className="grid w-full grid-cols-2">
7        <TabsTrigger value="account">Account</TabsTrigger>
8        <TabsTrigger value="password">Password</TabsTrigger>
9      </TabsList>
10      <TabsContent value="account">
11        Make changes to your account here.
12      </TabsContent>
13      <TabsContent value="password">
14        Change your password here.
15      </TabsContent>
16    </Tabs>
17  )
18}

Vertical Tabs

Tabs arranged vertically.

View and edit your profile information.

Code for Vertical Tabs

1import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
2
3export function VerticalTabs() {
4  return (
5    <Tabs defaultValue="profile" orientation="vertical" className="flex w-[400px] h-[200px]">
6      <TabsList className="flex flex-col h-full">
7        <TabsTrigger value="profile">Profile</TabsTrigger>
8        <TabsTrigger value="settings">Settings</TabsTrigger>
9        <TabsTrigger value="notifications">Notifications</TabsTrigger>
10      </TabsList>
11      <TabsContent value="profile" className="flex-1 p-4">
12        View and edit your profile information.
13      </TabsContent>
14      <TabsContent value="settings" className="flex-1 p-4">
15        Adjust application settings.
16      </TabsContent>
17      <TabsContent value="notifications" className="flex-1 p-4">
18        Manage your notification preferences.
19      </TabsContent>
20    </Tabs>
21  )
22}

Props

These are the available props for the Tabs component:

Prop	Type	Description	Default
defaultValue	string	The value of the tab that should be active when initially rendered.	-
value	string	The controlled value of the active tab.	-
onValueChange	(value: string) => void	Event handler called when the active tab changes.	-
orientation	"horizontal" \| "vertical"	The orientation of the tabs.	"horizontal"