Tabs

Each TabItem holds its content; uncontrolled with defaultValue or controlled with value + onChange.

General settings…


import { Tabs } from '@gg-software/ui';
 
<Tabs
    defaultValue="general"
    items={[
        { key: 'general', label: 'General', content: <GeneralSettings /> },
        { key: 'members', label: 'Members', content: <MemberList /> },
        { key: 'billing', label: 'Billing', content: <Billing />, disabled: true },
    ]}
/>
 
// card style, controlled
<Tabs variant="card" value={tab} onChange={(key) => setTab(key)} items={items} />

Props

Prop	Type	Default
`items`*	`TabItem[]`	—
`value`	`string`	—
`defaultValue`	`string`	—
`onChange`	`((key: string) => void)`	—
`variant`	`"line" \| "card"`	`line`
`className`	`string`	—

* required · generated from packages/ui/src/navigation/Tabs/Tabs.tsx

Types


type TabItem = {
    key: string;
    label: ReactNode;
    content?: ReactNode;
    disabled?: boolean;
};