Tabs

Tabstrips allow users to navigate between two or more related views. They’re a helpful way of letting users quickly switch between related information.

import { Tabs, Tab, TabsList, TabsPanel } from '../ui/tabs';
import { Separator } from '../ui/separator';
import { cn } from '@/lib/utils';

export default function TabsDemo() {
  return (
    <Tabs
      defaultValue='tab1'
      className={cn('w-full max-w-64 rounded-lg border')}
    >
      <TabsList className='p-2'>
        <Tab value='tab1'>Tab 1</Tab>
        <Tab value='tab2'>Tab 2</Tab>
        <Tab value='tab3'>Tab 3</Tab>
      </TabsList>
      <Separator />
      <TabsPanel value='tab1' className='p-2'>
        Content for Tab 1
      </TabsPanel>
      <TabsPanel value='tab2' className='p-2'>
        Content for Tab 2
      </TabsPanel>
      <TabsPanel value='tab3' className='p-2'>
        Content for Tab 3
      </TabsPanel>
    </Tabs>
  );
}