# Tabs
Tabbed navigation primitives for grouped content.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/tabs
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=tabs--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="300" title="Tabs component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<TabsRoot defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="export">Export</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General preferences content.</TabsContent>
  <TabsContent value="export">Export preferences content.</TabsContent>
</TabsRoot>
```

## Props

### TabsTrigger

<PropsTable
  props={[
  {
    name: "size",
    type: '"sm" | "default"',
    default: '"sm"',
    description: "Visual size scale for tab trigger labels.",
  },
]}
/>

Built on [Base UI Tabs](https://base-ui.com/react/components/tabs). See their docs for primitive-level details on `TabsRoot`, `TabsList`, and `TabsContent`.