Downcity
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

  • 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