Tabs
Preview: Underline
Switch between panels of related content in place (React Aria Tabs).
Import
import { Tabs, TabList, Tab, TabPanel } from '@marbleui/ui'Props
Accessibility
Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Tab · React Aria TabList · React Aria TabPanel · React Aria Tabs. Follow the primitive's docs for the full keyboard map.
Usage notes
Switch between panels of related content in the same place. Each Tab id matches a TabPanel id.
<Tabs>
<TabList aria-label="Settings"><Tab id="profile">Profile</Tab><Tab id="billing">Billing</Tab></TabList>
<TabPanel id="profile">…</TabPanel>
<TabPanel id="billing">…</TabPanel>
</Tabs>- Arrow keys move between tabs;
keyboardActivation="manual"requires Enter/Space to switch (better for heavy panels). - Tabs must control panels. For a value picker without panels use
SegmentedControl; for page navigation useTabNav(links).
Example source · show· hide
import { Tab, TabList, TabPanel, Tabs } from './tabs'
const panels = {
overview: 'Revenue is up 12% this month, driven by annual plans.',
activity: '18 events in the last 24 hours. Nothing needs your attention.',
settings: 'Billing, members and integrations live here.',
}
const Example = ({ variant }: { variant: 'underline' | 'pill' | 'enclosed' }) => (
<Tabs variant={variant} className="w-96">
<TabList aria-label="Project">
<Tab id="overview">Overview</Tab>
<Tab id="activity">Activity</Tab>
<Tab id="settings">Settings</Tab>
{variant !== 'enclosed' && <Tab id="archived" isDisabled>Archived</Tab>}
</TabList>
{Object.entries(panels).map(([id, text]) => (
<TabPanel key={id} id={id}>{text}</TabPanel>
))}
</Tabs>
)
export const styles = {
Underline: () => <Example variant="underline" />,
Pill: () => <Example variant="pill" />,
Enclosed: () => <Example variant="enclosed" />,
}Source: packages/ui/src/tabs/tabs.tsx
Catalog
- Category
- navigation
- Priority
- Foundation
- Primitive
- react-aria
- React Aria
- Tabs
- Base UI
- Tabs