Tabs

v1.0.0

Tabbed navigation for switching between related views.

Import

import { Tabs } from '@meteorack/sdk-react';

How To Use It

Use tabs to split one page into a small number of related sections such as General, Features, and Advanced.
Keep each tab focused and avoid hiding critical destructive actions several layers deep inside tab content.

Works Well With

PageHeader Card Notice

Props

tabs: TabItem[]

Ordered tab definitions; each item has an id, label, and content node.

defaultTab?: string

Initially selected tab id. Defaults to the first tab.

className?: string

Optional class name for the root tabs wrapper.

Example

Tabs.tsx

import { Tabs, Card } from '@meteorack/sdk-react';

export function SettingsTabs() {
  return (
    <Tabs
      defaultTab="general"
      tabs={[
        {
          id: 'general',
          label: 'General',
          content: <Card>General settings content</Card>,
        },
        {
          id: 'advanced',
          label: 'Advanced',
          content: <Card>Advanced settings content</Card>,
        },
      ]}
    />
  );
}

PreviousSwitch NextTable