Tabs

The Tabs component provides a set of layered sections displayed one at a time, allowing for organized content presentation.

Preview

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <Tabs defaultValue='tab1'>
    
      <TabsList>
        <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      
      <TabsContent value='tab1'>
        <p>Content for Tab 1</p>
      </TabsContent>
      
      <TabsContent value='tab2'>
        <p>Content for Tab 2</p>
      </TabsContent>
      
      <TabsContent value='tab3'>
        <p>Content for Tab 3</p>
      </TabsContent>
      
    </Tabs>
  );
}

Props

Prop	Description	Required	Value
className	custom style	optional	SCSS or Tailwind
defaultValue	default selected tab name	required	string

Notes

• The Tabs component uses TabsPrimitive from @radix-ui/react-tabs for tab functionality.

• The className prop allows for custom styling to be applied.

• The defaultValue prop specifies the default selected tab.

• For more details, refer to the Shadcn Tabs documentation.