navigation

Tabs

Tabbed content panels built on Radix UI. Keyboard navigable with line (underline) or solid (pill) visual variants.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@stella-ds/react'

TabsTabsListTabsTriggerTabsContent

Props

Prop	Type	Default	Description
variant	'line' \| 'solid'	'line'	Visual style — underline or pill/box

Preview

Overview content goes here.

Examples

Basic

<Tabs defaultValue="overview" variant="line">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>

← Switch

All Components

Text →