Tabs

Use for same-level content switching and panel segmentation

Tabs is for switching between same-level content panels.

Import

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

Basic Example

Loading preview…

TabsList Variants

  • variant="default"
  • variant="line"

Orientation

  • orientation="horizontal"
  • orientation="vertical"

Usage Notes

  • TabsTrigger must live inside TabsList
  • Match each trigger value with a TabsContent
  • Use Tabs for content panels and ToggleGroup for compact action switching
  • Tabs
  • TabsList
  • TabsTrigger
  • TabsContent
  • tabsListVariants