Tabs

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

Installation

›pnpm dlx shadcn@latest add @evolphin/tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

Type Definitions

interface TabsProps {
  /** The value of the selected tab */
  value?: string;  
TabsProps.value?: string | undefined
The value of the selected tab
  /** The default value of the selected tab when uncontrolled */
  ?: string;
  /** Event handler called when the value changes */
  ?: (: string) => void;
  /** The orientation of the tabs */
  ?: "horizontal" | "vertical";
  /** The direction of navigation */
  ?: "ltr" | "rtl";
  /** Whether the tabs should be activated automatically on focus */
  ?: "automatic" | "manual";
}

Examples

Default

Account

Make changes to your account here. Click save when you're done.

Name

Username

API Reference

Prop	Type	Default	Description
`defaultValue`	`string`	-	The value of the tab to select by default.
`value`	`string`	-	The controlled value of the tab to select.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.
`orientation`	`"horizontal" \	"vertical"`	`"horizontal"`
`dir`	`"ltr" \	"rtl"`	`"ltr"`
`activationMode`	`"automatic" \	"manual"`	`"automatic"`
`className`	`string`	-	Additional CSS classes

TabsList

Prop	Type	Default	Description
`loop`	`boolean`	`true`	Whether keyboard navigation should loop around.
`className`	`string`	-	Additional CSS classes

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	-	A unique value for the tab.
`disabled`	`boolean`	`false`	Whether the trigger is disabled.
`className`	`string`	-	Additional CSS classes

TabsContent

Prop	Type	Default	Description
`value`	`string`	-	A unique value for the tab.
`forceMount`	`boolean`	-	Used to force mounting when more control is needed.
`className`	`string`	-	Additional CSS classes

Search

Tabs

On this page