ComponentsNavigationTabs

Tabs

9 variants · horizontal + vertical · badge · icon · subtitle · scrollable · step

UnderlinePillFilledBorderedCardFloatingBubbleGradientVertical (line)ScrollableStepTabsWith subtitle

Underline (M3 primary)

Live preview

Classic bottom-border active indicator — icon, badge, disabled states

Content for Overview

App.tsx

tsx

1<Tabs variant="underline" defaultValue="overview">
<TabsList>
  <TabsTrigger value="overview" icon="info">Overview</TabsTrigger>
  <TabsTrigger value="analytics" badge={3}>Analytics</TabsTrigger>
  <TabsTrigger value="reports">Reports</TabsTrigger>
  <TabsTrigger value="messages" badge={12}>Messages</TabsTrigger>
  <TabsTrigger value="settings" disabled>Disabled</TabsTrigger>
</TabsList>
<TabsContent value="overview"><p>Overview content goes here.</p></TabsContent>
<TabsContent value="analytics"><p>Analytics content goes here.</p></TabsContent>
<TabsContent value="reports"><p>Reports content goes here.</p></TabsContent>
<TabsContent value="messages"><p>Messages content goes here.</p></TabsContent>
13</Tabs>

Pill / Segmented

Live preview

Floating pill on a tinted background — great for filter controls

Content for All

App.tsx

tsx

1<Tabs variant="pill" defaultValue="all">
<TabsList>
  <TabsTrigger value="all">All</TabsTrigger>
  <TabsTrigger value="active">Active</TabsTrigger>
  <TabsTrigger value="paused">Paused</TabsTrigger>
  <TabsTrigger value="completed">Completed</TabsTrigger>
</TabsList>
<TabsContent value="all"><p>All items shown here.</p></TabsContent>
<TabsContent value="active"><p>Active items shown here.</p></TabsContent>
<TabsContent value="paused"><p>Paused items shown here.</p></TabsContent>
<TabsContent value="completed"><p>Completed items shown here.</p></TabsContent>
12</Tabs>

Filled

Live preview

Solid primary background on the active tab

Content for Design

App.tsx

tsx

1<Tabs variant="filled" defaultValue="design">
<TabsList>
  <TabsTrigger value="design">Design</TabsTrigger>
  <TabsTrigger value="engineering">Engineering</TabsTrigger>
  <TabsTrigger value="marketing">Marketing</TabsTrigger>
  <TabsTrigger value="product">Product</TabsTrigger>
</TabsList>
<TabsContent value="design"><p>Design team content.</p></TabsContent>
<TabsContent value="engineering"><p>Engineering team content.</p></TabsContent>
<TabsContent value="marketing"><p>Marketing team content.</p></TabsContent>
<TabsContent value="product"><p>Product team content.</p></TabsContent>
12</Tabs>

Bordered

Live preview

Outlined active tab — clean and minimal

Content for Day

App.tsx

tsx

1<Tabs variant="bordered" defaultValue="day">
<TabsList>
  <TabsTrigger value="day">Day</TabsTrigger>
  <TabsTrigger value="week">Week</TabsTrigger>
  <TabsTrigger value="month">Month</TabsTrigger>
  <TabsTrigger value="year">Year</TabsTrigger>
</TabsList>
<TabsContent value="day"><p>Daily view.</p></TabsContent>
<TabsContent value="week"><p>Weekly view.</p></TabsContent>
<TabsContent value="month"><p>Monthly view.</p></TabsContent>
<TabsContent value="year"><p>Yearly view.</p></TabsContent>
12</Tabs>

Card tabs

Live preview

Each tab styled as an individual card — supports icons

Content for Analytics

App.tsx

tsx

1<Tabs variant="card" defaultValue="analytics">
<TabsList>
  <TabsTrigger value="analytics" icon="info">Analytics</TabsTrigger>
  <TabsTrigger value="team" icon="info">Team</TabsTrigger>
  <TabsTrigger value="settings" icon="settings">Settings</TabsTrigger>
  <TabsTrigger value="billing" icon="info">Billing</TabsTrigger>
</TabsList>
<TabsContent value="analytics"><p>Analytics dashboard content.</p></TabsContent>
<TabsContent value="team"><p>Team management content.</p></TabsContent>
<TabsContent value="settings"><p>Settings content.</p></TabsContent>
<TabsContent value="billing"><p>Billing content.</p></TabsContent>
12</Tabs>

Floating pill

Live preview

Elevated floating appearance with shadow on the active tab

Content for Overview

App.tsx

tsx

1<Tabs variant="floating" defaultValue="overview">
<TabsList>
  <TabsTrigger value="overview">Overview</TabsTrigger>
  <TabsTrigger value="analytics">Analytics</TabsTrigger>
  <TabsTrigger value="reports">Reports</TabsTrigger>
  <TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="overview"><p>Overview content.</p></TabsContent>
<TabsContent value="analytics"><p>Analytics content.</p></TabsContent>
<TabsContent value="reports"><p>Reports content.</p></TabsContent>
<TabsContent value="settings"><p>Settings content.</p></TabsContent>
12</Tabs>

Bubble

Live preview

Rounded bubble selection on a tinted container

Content for All posts

App.tsx

tsx

1<Tabs variant="bubble" defaultValue="all">
<TabsList>
  <TabsTrigger value="all">All posts</TabsTrigger>
  <TabsTrigger value="published">Published</TabsTrigger>
  <TabsTrigger value="drafts">Drafts</TabsTrigger>
  <TabsTrigger value="archived">Archived</TabsTrigger>
</TabsList>
<TabsContent value="all"><p>All posts content.</p></TabsContent>
<TabsContent value="published"><p>Published posts.</p></TabsContent>
<TabsContent value="drafts"><p>Draft posts.</p></TabsContent>
<TabsContent value="archived"><p>Archived posts.</p></TabsContent>
12</Tabs>

Gradient active

Live preview

Gradient background on the active tab — great for pricing toggles

Content for Monthly

App.tsx

tsx

1<Tabs variant="gradient" defaultValue="monthly">
<TabsList>
  <TabsTrigger value="monthly">Monthly</TabsTrigger>
  <TabsTrigger value="yearly">Yearly</TabsTrigger>
  <TabsTrigger value="lifetime">Lifetime</TabsTrigger>
</TabsList>
<TabsContent value="monthly"><p>Monthly pricing plans.</p></TabsContent>
<TabsContent value="yearly"><p>Yearly pricing — save 20%.</p></TabsContent>
<TabsContent value="lifetime"><p>Lifetime access — one-time payment.</p></TabsContent>
10</Tabs>

Vertical (line variant)

Live preview

orientation=vertical stacks the tab list on the left — icons supported

Profile settings

Manage your profile information.

App.tsx

tsx

1<Tabs variant="line" orientation="vertical" defaultValue="profile">
<TabsList>
  <TabsTrigger value="profile"       icon="info">Profile</TabsTrigger>
  <TabsTrigger value="notifications" icon="bell">Notifications</TabsTrigger>
  <TabsTrigger value="security"      icon="lock">Security</TabsTrigger>
  <TabsTrigger value="billing"       icon="info">Billing</TabsTrigger>
  <TabsTrigger value="advanced"      icon="settings">Advanced</TabsTrigger>
</TabsList>
<TabsContent value="profile">
  <p className="font-medium">Profile settings</p>
  <p>Manage your profile information.</p>
</TabsContent>
<TabsContent value="notifications">
  <p className="font-medium">Notification preferences</p>
  <p>Control how you receive notifications.</p>
</TabsContent>
{/* … other content panels */}
18</Tabs>

Scrollable

Live preview

Overflow tabs scroll horizontally — scroll with mouse wheel or drag

Active: React— scroll left/right to see all tabs

App.tsx

tsx

1const scrollRef = useRef<HTMLDivElement>(null)
2 
3function handleWheel(e: React.WheelEvent<HTMLDivElement>) {
e.preventDefault()
if (scrollRef.current) scrollRef.current.scrollLeft += e.deltaY
6}
7 
8<div style={{ width: 300, overflow: 'hidden' }}>
<div
  ref={scrollRef}
  onWheel={handleWheel}
  style={{
    display: 'flex',
    overflowX: 'scroll',
    borderBottom: '2px solid var(--color-border)',
    scrollbarWidth: 'none',
  }}
>
  {['React', 'TypeScript', 'Tailwind', 'Next.js',
    'Vue', 'Angular', 'Svelte', 'Remix', 'Astro'].map(t => (
    <button
      key={t}
      type="button"
      style={{ flexShrink: 0, padding: '8px 16px', whiteSpace: 'nowrap' }}
    >
      {t}
    </button>
  ))}
</div>
30</div>

StepTabs — wizard

Live preview

Progress indicator for multi-step flows — done, active, and disabled states

Current step: profile

App.tsx

tsx

1import { StepTabs } from 'omverse-ui'
2 
3const steps = [
4  { value: 'account', label: 'Account', done: true     },
5  { value: 'profile', label: 'Profile'                 },
6  { value: 'plan',    label: 'Plan'                    },
7  { value: 'done',    label: 'Done',    disabled: true },
8]
9 
10const [step, setStep] = useState('profile')
11 
12<StepTabs value={step} onChange={setStep} steps={steps} />
13 
14<div style={{ marginTop: 16, display: 'flex', gap: 12 }}>
15  <button onClick={() => {
16    const idx = steps.findIndex(s => s.value === step)
17    if (idx > 0) setStep(steps[idx - 1].value)
18  }}>← Back</button>
19  <button onClick={() => {
20    const idx = steps.findIndex(s => s.value === step)
21    const next = steps[idx + 1]
22    if (next && !next.disabled) setStep(next.value)
23  }}>Next →</button>
24</div>

With subtitle

Live preview

subtitle prop adds a small secondary line below each tab label

Content for Overview

App.tsx

tsx

1<Tabs variant="underline" defaultValue="overview">
<TabsList>
  <TabsTrigger value="overview"   subtitle="All metrics">Overview</TabsTrigger>
  <TabsTrigger value="revenue"    subtitle="$48.2k">Revenue</TabsTrigger>
  <TabsTrigger value="users"      subtitle="2,841 active">Users</TabsTrigger>
  <TabsTrigger value="conversion" subtitle="3.2%">Conversion</TabsTrigger>
</TabsList>
<TabsContent value="overview"><p>All metrics overview.</p></TabsContent>
<TabsContent value="revenue"><p>Revenue breakdown.</p></TabsContent>
<TabsContent value="users"><p>User analytics.</p></TabsContent>
<TabsContent value="conversion"><p>Conversion funnel.</p></TabsContent>
12</Tabs>

Tabs props

Props

PropTypeDefaultDescription

defaultValuestring—Initially active tab value (uncontrolled)

valuestring—Controlled active tab value

onValueChange(value: string) => void—Callback fired when the active tab changes

orientation'horizontal' | 'vertical''horizontal'Tab list direction

size'sm' | 'md' | 'lg''md'Size of tab labels

childrenReactNode—TabsList + TabsContent components

StepTabs props

Props

PropTypeDefaultDescription

valuestring—Controlled active step value

onChange(value: string) => void—Callback fired when the active step changes

steps{ value: string; label: string; done?: boolean; disabled?: boolean }[]—Step definitions