Component

Tabs

Name: Forge
Rating: 5 (1 reviews)
Author: Webba Creative

Navigation tabs with sliding indicator. Use for switching between related content views.

tsx

import { Tabs, TabPanels, TabPanel } from 'wss3-forge'

Usage

•

Use underline variant for page-level navigation

•

Use pills variant for compact sections

•

Add icons for visual recognition

•

Use count for notification indicators

•

fullWidth distributes tabs evenly

Examples

Underline Tabs with Stretch Line

tsx

1<Tabs
2  tabs={[
3    { id: 'overview', label: 'Overview' },
4    { id: 'features', label: 'Features' },
5    { id: 'pricing', label: 'Pricing' }
6  ]}
7  active="overview"
8  onChange={setActiveTab}
9  stretchLine
10/>

Pills Variant

tsx

1<Tabs
2  tabs={[
3    { id: 'all', label: 'All' },
4    { id: 'active', label: 'Active' },
5    { id: 'completed', label: 'Completed' }
6  ]}
7  active="all"
8  onChange={setActiveTab}
9  variant="pills"
10/>

Full Width

tsx

1<Tabs
2  tabs={[
3    { id: 'tab1', label: 'Tab 1' },
4    { id: 'tab2', label: 'Tab 2' },
5    { id: 'tab3', label: 'Tab 3' }
6  ]}
7  active="tab1"
8  onChange={setActiveTab}
9  fullWidth
10  stretchLine
11/>

Stepper

CommandBar

Last updated: December 2025