Tabs

A tab navigation component built with Headless UI.

Import

import { Tabs } from '@/components/ui';

Basic Usage

<Tabs
  tabs={[
    { label: 'Profile', content: <ProfileTab /> },
    { label: 'Settings', content: <SettingsTab /> },
    { label: 'Billing', content: <BillingTab /> },
  ]}
/>

Props

Default Tab

<Tabs
  defaultIndex={1}  // Starts on Settings tab
  tabs={[
    { label: 'Profile', content: <ProfileTab /> },
    { label: 'Settings', content: <SettingsTab /> },
    { label: 'Billing', content: <BillingTab /> },
  ]}
/>

Complete Example

'use client';
import { Tabs, Card, Input, Button, Switch } from '@/components/ui';

export function UserSettings() {
  return (
    <Card>
      <Tabs
        tabs={[
          {
            label: 'Profile',
            content: (
              <div className="space-y-4">
                <Input label="Name" defaultValue="John Doe" />
                <Input label="Email" defaultValue="john@example.com" />
                <Button color="blue">Save Profile</Button>
              </div>
            ),
          },
          {
            label: 'Notifications',
            content: (
              <div className="space-y-4">
                <Switch label="Email notifications" checked />
                <Switch label="Push notifications" checked={false} />
                <Switch label="Weekly digest" checked />
              </div>
            ),
          },
          {
            label: 'Security',
            content: (
              <div className="space-y-4">
                <Input label="Current Password" type="password" />
                <Input label="New Password" type="password" />
                <Button color="blue">Update Password</Button>
              </div>
            ),
          },
        ]}
      />
    </Card>
  );
}

With Data Fetching

'use client';
import { Tabs, Spinner } from '@/components/ui';
import { useQuery } from '@tanstack/react-query';

export function ProjectTabs({ projectId }) {
  const { data: project, isLoading } = useQuery({
    queryKey: ['project', projectId],
    queryFn: () => fetchProject(projectId),
  });

  if (isLoading) return <Spinner />;

  return (
    <Tabs
      tabs={[
        {
          label: 'Overview',
          content: <ProjectOverview project={project} />,
        },
        {
          label: 'Members',
          content: <ProjectMembers members={project.members} />,
        },
        {
          label: 'Settings',
          content: <ProjectSettings project={project} />,
        },
      ]}
    />
  );
}

Styling

• Tab list has a gray background (bg-zinc-100)
• Selected tab is white with shadow
• Unselected tabs have muted text
• Smooth color transitions
• Dark mode support
• Focus ring for accessibility

Layout

{/* Tabs fill container width */}
<div className="max-w-2xl">
  <Tabs tabs={[...]} />
</div>

{/* Centered tabs */}
<div className="flex justify-center">
  <Tabs tabs={[...]} />
</div>