Live component development with hot reload

@fieldflow360/org-ui

Active tab
tabs-switcher

TabsSwitcher

Global controls (applies to all examples)

TabsSwitcher controls

<TabsSwitcher
  label="Size"
  value={sizeTab}
  onChange={setSizeTab}
  items={[
    { value: ComponentSizeEnum.SM, label: 'Small' },
    { value: ComponentSizeEnum.MD, label: 'Medium' },
    { value: ComponentSizeEnum.LG, label: 'Large' },
  ]}
/>

Size

Radius

View

Basic TabsSwitcher

<TabsSwitcher
  value={activeTab}
  onChange={setActiveTab}
  items={[
    { value: 'overview', label: 'Overview' },
    { value: 'analytics', label: 'Analytics' },
    { value: 'settings', label: 'Settings' },
  ]}
/>

Project sections

Active tab: overview

With icons

TabsSwitcher with icons

<TabsSwitcher
  items={[
    { value: 'overview', label: 'Overview', icon: <HomeIcon /> },
    { value: 'analytics', label: 'Analytics', icon: <ChartIcon /> },
    { value: 'settings', label: 'Settings', icon: <SettingsIcon /> },
  ]}
/>

Disabled item

Disabled tab item

<TabsSwitcher
  defaultValue="overview"
  items={[
    { value: 'overview', label: 'Overview' },
    { value: 'analytics', label: 'Analytics', disabled: true },
    { value: 'settings', label: 'Settings' },
  ]}
/>