> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/tabs.md).

# Tabs

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

### Preview

<div align="left"><figure><img src="/files/m7WfymGwECCu64TMis6N" alt="Gravity tabs component" width="563"><figcaption></figcaption></figure></div>

### Usage

```javascript
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](https://ui.shadcn.com/docs/components/tabs).