# Tabs

A tabs widget with sliding indicator and panel crossfade.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/tabs
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { Tabs } from "@/components/ui/tabs";
```

```tsx
<Tabs state="Account" variant="pill" />
```

## Smooth transitions

The docs preview cycles Account → Password → Settings via `useTabsTransition`. Forward `variant` into the hook when using `style` so the indicator layout matches the variant prop:

```tsx
import { Tabs } from "@/components/framecn/tabs";
import { useTabsTransition } from "@/components/framecn/use-tabs-transition";

const style = useTabsTransition(
  [
    { at: 18, state: "Account", duration: 16 },
    { at: 58, state: "Password", duration: 18 },
    { at: 94, state: "Settings", duration: 12 },
  ],
  { variant: "pill" }
);

<Tabs style={style} variant="pill" />;
```

`style` takes precedence over `state` when both are provided.

## API Reference

### Tabs

| Prop            | Type                    | Default                               |
| --------------- | ----------------------- | ------------------------------------- |
| `state`         | `string`                | `"Account"`                           |
| `style`         | `TabsStyle`             | `-` (takes precedence over `state`)   |
| `items`         | `string[]`              | `["Account", "Password", "Settings"]` |
| `contents`      | `string[]`              | Default panel copy for each tab       |
| `contentHeight` | `number`                | `-`                                   |
| `variant`       | `"pill" \| "underline"` | `"pill"`                              |
| `theme`         | `Partial<FramecnTheme>` | `-`                                   |
| `className`     | `string`                | `-`                                   |