Tabs

Tabs are used to organize and allow navigation between groups of content that are related and at the same level of hierarchy. This component is built with Headless UI for full accessibility.

Props

Prop	Type	Description
tabs	Array<{ label: string, content: ReactNode }>	An array of objects representing each tab and its panel content.

Example

Basic Tabs

A standard set of tabs. The component requires a `tabs` prop which is an array of objects.

This is the content for the My Account tab. You can manage your profile and preferences here.

import Tabs from '@/components/Tabs';

export default function MyComponent() {
  const myTabs = [
    { label: 'My Account', content: <p>Account content...</p> },
    { label: 'Company', content: <p>Company content...</p> },
    { label: 'Team Members', content: <p>Team Members content...</p> },
    { label: 'Billing', content: <p>Billing content...</p> },
  ];

  return <Tabs tabs={myTabs} />;
}