Components
Tabs
Use for same-level content switching and panel segmentation
Tabs
Tabs is for switching between same-level content panels.
Import
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@downcity/ui";Basic Example
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@downcity/ui";
export function SettingsTabs() {
return (
<Tabs defaultValue="general" className="max-w-2xl">
<TabsList>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<TabsContent value="general">General settings content</TabsContent>
<TabsContent value="advanced">Advanced settings content</TabsContent>
</Tabs>
);
}TabsList Variants
variant="default"variant="line"
Orientation
orientation="horizontal"orientation="vertical"
Usage Notes
TabsTriggermust live insideTabsList- Match each trigger
valuewith aTabsContent - Use
Tabsfor content panels andToggleGroupfor compact action switching
Related Exports
TabsTabsListTabsTriggerTabsContenttabsListVariants