import * as React from "react"; import { Tabs as BaseTabs } from "@base-ui/react/tabs"; import { cn } from "@/lib/utils"; const Tabs = React.forwardRef< React.ComponentRef, React.ComponentProps >(({ className, ...props }, ref) => ( )); Tabs.displayName = "Tabs"; const TabsList = React.forwardRef< React.ComponentRef, React.ComponentProps >(({ className, ...props }, ref) => ( )); TabsList.displayName = "TabsList"; const TabsTrigger = React.forwardRef< React.ComponentRef, React.ComponentProps >(({ className, ...props }, ref) => ( )); TabsTrigger.displayName = "TabsTrigger"; const TabsContent = React.forwardRef< React.ComponentRef, React.ComponentProps >(({ className, ...props }, ref) => ( )); TabsContent.displayName = "TabsContent"; const TabsIndicator = React.forwardRef< React.ComponentRef, React.ComponentProps >(({ className, ...props }, ref) => ( )); TabsIndicator.displayName = "TabsIndicator"; export type TabsProps = React.ComponentProps; export type TabsListProps = React.ComponentProps; export type TabsTriggerProps = React.ComponentProps; export type TabsContentProps = React.ComponentProps; export type TabsIndicatorProps = React.ComponentProps; export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator, };

Prop	Type	Default	Description
defaultValue	string	—	The value of the tab to select by default
value	string	—	The controlled value of the currently active tab
onValueChange	(value: string) => void	—	Callback fired when the active tab changes

Tabs

#Installation

#Usage

#Examples

#API Reference