Tabs

The Tabs component provides a simple way to switch between multiple sections of related content using a tabbed interface.

Usage & Examples

Default

default.tsx

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs theme="primary"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs theme="secondary"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs theme="tertiary"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs theme="quaternary"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

// States

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs state="success"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs state="warning"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs state="error"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs state="info"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

// Sizes

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs size="xs"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs size="small"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs size="medium"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs size="large"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

// Variants

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs variant="solid"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs variant="outline"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs variant="glass"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

// Rounding

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs rounding="none"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs rounding="medium"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs rounding="large"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

// Shadows

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs shadow="none"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs shadow="light"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs shadow="strong"
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

Props API

19 props
Columns
Tabs props API
Default
Description
aria-describedbystringNoaria—Accessible description id for the tablist.
aria-labelstringNoaria"Tabs"Accessible name for the tablist.
aria-labelledbystringNoaria—Accessible labelledby id for the tablist. Preferred over aria-label when provided.
aria-live"off" | "polite" | "assertive"Noaria—Optional aria-live setting if tab changes should be announced by a related region.
classNamestringNostyling—Custom class names to apply to the tabs container.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultValuenumberNoprops0Uncontrolled initial index.
idBasestringNoprops—Optional stable base used to create ids: `${idBase}-tab-${i}` and `${idBase}-panel-${i}`
onValueChange((index: number) => void)Noevents—Callback when the active tab changes.
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding of the tabs. "none" | "small" | "medium" | "large" | "full"
shadowShadowTypeNostyling—Shadow style of the tabs. "none" | "light" | "medium" | "strong" | "intense"
sizeSizeTypeNostylingconfigured default size (fallback: "medium")Size of the tabs. "xs" | "small" | "medium" | "large" | "xl"