Tabs

A fully accessible and customizable tabbed interface component with support for controlled and uncontrolled modes.

Basic Example

Content for Tab 1

This is the content area for tab 1. You can put any content here.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Tabs Code

Copy Tabs Code

Tabs Props

Name	Type	Required	Default	Description
defaultValue	string	No	undefined	The default value for the uncontrolled tabs. Represents the initially selected tab.
value	string	No	undefined	The controlled value for the tabs. When provided, the component operates in controlled mode.
onValueChange	(value: string) => void	No	undefined	Callback function that fires when the selected tab changes. Required for controlled usage.
children	React.ReactNode	Yes	undefined	The content of the tabs component, typically includes TabsList and TabsContent components.
className	string	No	undefined	Additional class names for custom styling of the tabs container.

TabsList Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the tabs list, typically includes TabsTrigger components.
className	string	No	undefined	Additional class names for custom styling of the tabs list container.

TabsTrigger Props

Name	Type	Required	Default	Description
value	string	Yes	undefined	The unique identifier for the tab that matches with the corresponding TabsContent value.
children	React.ReactNode	No	undefined	The content of the tab trigger button, such as text or icons.
className	string	No	undefined	Additional class names for custom styling of the tab trigger button.
disabled	boolean	No	false	Whether the tab trigger is disabled.

TabsContent Props

Name	Type	Required	Default	Description
value	string	Yes	undefined	The unique identifier for the content that matches with the corresponding TabsTrigger value.
children	React.ReactNode	No	undefined	The content to display when the tab is active.
className	string	No	undefined	Additional class names for custom styling of the tab content.