# Feature tabs

> Features shown in tabs, built on Base UI. A tab opens when you press Enter, not when you move to it with the arrow keys.

Facade UI item `feature-tabs` (block, section).
Docs page: https://facadeui.dev/components/feature-tabs · Registry JSON: https://facadeui.dev/r/feature-tabs.json

## Install

```bash
npx shadcn@latest add @facade/feature-tabs
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/feature-tabs.json`. The CLI also installs what it needs: @base-ui-components/react@1.0.0-rc.0, @facade/container, @facade/heading, @facade/section, @facade/section-header, @facade/types, @facade/utils.

Files: `components/sections/feature-tabs.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/feature-tabs-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
"use client"

/**
 * `"use client"` is required, not incidental: FeatureTabs is a client component
 * and the tab items carry icon components, which cannot cross a server-to-client
 * boundary as props. See the note on `IconComponent`.
 */

import { FeatureTabs } from "@/components/sections/feature-tabs"

import { TABS } from "./content"

export function Demo() {
  return (
    <FeatureTabs
      eyebrow="How it works"
      title="Three steps, one system"
      description="Arrow through the tabs: focus moves without switching panels. Enter or Space selects."
      items={TABS}
    />
  )
}
```

## Props

### FeatureTabsProps

Extends SectionBaseProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `FeatureTabItem[]` |  |  |
| `title` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `description` | `string` |  |  |
| `defaultValue` | `string` |  | Which tab starts selected. Defaults to the first. |
| `itemHeadingLevel` | `HeadingLevel` |  |  |
| `align` | `"start" \| "center"` | `"center"` |  |