# Feature Tabs (Moonarc)

A product's features as tabs: a named radio group over one panel per feature, each with its title, body and image, the image optionally in a browser window. The panel slides in from the side of the tab that was chosen, so going back comes in from the start. Zero JavaScript of its own: the radios are native and :has() moves the panels.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/feature-tabs` (license key required)
- Tier B · category section · trigger click
- Readout: `<FeatureTabs tabs={[{ label, title, body, image }]} frame={{ url }}>`
- Browser support: widely (Chrome 117 · Firefox 129 · Safari 17.5); elsewhere: panels switch without the slide
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 16.1 kB raw)
- Page: https://moonarc.dev/components/feature-tabs/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `tabs` | `{ label, title, body, image?: { src, alt } }[]` | none | The features, up to eight: the tab's label, the panel's heading and text, and an image (imported and optimised by Astro, or a URL) with its alt. A static slot panel-1 … panel-8 (n from 1) replaces that panel whole. |
| `label` | `string` | `'Features'` | Accessible name of the radio group. |
| `active` | `number` | `0` | Index of the tab selected on load. |
| `frame` | `{ url }` | none | Show each panel's image inside a BrowserFrame with this address. |
| `level` | `1 | 2` | `2` | Heading level of the headline: 2 under the page's h1, 1 when the section opens its page. The panel titles are one level below it. |
| `headline` | `string` | none | The section's heading. The headline slot wins over it. |
| `eyebrow` | `string` | none | Small label above the headline. The eyebrow slot wins over it. |
| `copy` | `string` | none | Supporting copy under the headline. The copy slot wins over it. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding and the gaps ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'start' | 'center'` | `'start'` | Alignment of the eyebrow, the headline and the copy. |

## Usage

```astro
---
import FeatureTabs from '@/components/moonarc/pro/FeatureTabs.astro';
import orders from '../assets/orders.png';
import stock from '../assets/stock.png';
---
<FeatureTabs
  eyebrow="Features"
  headline="Everything a small shop checks in a day"
  label="Features"
  frame={{ url: 'https://app.example.com' }}
  tabs={[
    { label: 'Orders', title: 'Every order in one list', body: 'Filter by channel, status or day.', image: { src: orders, alt: 'The orders list, filtered to today' } },
    { label: 'Stock', title: 'Stock by warehouse', body: 'Low stock raises an alert before it runs out.', image: { src: stock, alt: 'Stock levels for three warehouses' } },
  ]}
/>
```

## Reduced motion

The panels switch in place and the indicator jumps; the head and the tab list appear without travel.

## With ClientRouter

Inherits Tabs and Reveal; nothing to wire. The checked tab resets on a new page.

## Craft

- The slide follows the index, not the history: choosing a tab to the start side brings its panel in from that side, and a right-to-left page runs both ways mirrored.
- Panels that have slid away are hidden once the slide ends, so the keyboard never tabs into a panel that is not shown.
- Each tab is at least 44 px tall and the group is named, so a screen reader announces the features as one choice.

## Replaces

- Feature section with tabs (Tailwind Plus)
- Feature tabs blocks (shadcnblocks)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/feature-tabs` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: tabs, reveal, browser-frame.