# Feature with Code (Moonarc)

A feature section with code beside the copy: a headline, copy and a short list on one side, and CodeTabs on the other, one tab per client or language, each panel with its own copy button. The code keeps a ground it reads on in every tone, and the section sets CodeTabs through its tokens. The section ships no script of its own; CopyButton's script is the shared chunk.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/feature-code` (license key required)
- Tier A · category section · trigger click
- Readout: `<FeatureCode headline="…" points={[…]} tabs={[…]}>`
- Browser support: widely (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: the tabs switch without the fade; below 58 rem of the section's width the code follows the text
- Measured cost: 0 B JS of its own · uses CopyButton + runtime (with dependencies 2.5 kB raw; CSS 18.6 kB raw)
- Page: https://moonarc.dev/components/feature-code/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `tabs` | `{ label: string; code: string; lang?: string }[]` | none | The code, up to eight tabs. lang is a Shiki language id, sh by default. Each panel has its own copy button. |
| `headline` | `string` | none | The headline. The headline slot wins over it. |
| `eyebrow` | `string` | none | Small label above the headline. The eyebrow slot wins over it. |
| `copy` | `string` | none | The paragraph under the headline. The copy slot wins over it. |
| `points` | `string[]` | none | A short list under the copy, one line each, with a tick before it. |
| `label` | `string` | `'Client'` | Accessible name of the tabs, which are a radiogroup. |
| `active` | `number` | `0` | The tab open on load, from 0. |
| `themes` | `{ light: string; dark: string }` | `github-light / github-dark-default` | Shiki themes. Every token colour is moved at build until it reads at 4.5 : 1 on its panel. |
| `side` | `'start' | 'end'` | `'end'` | Side of the code from 58 rem of the section's width: the inline end or the inline start. Below it the code follows the text. |
| `level` | `1 | 2` | `2` | Heading level of the headline: 2 under the page's h1, 1 when the section opens the page. |
| `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. The code block keeps a ground its highlighting reads on: the card on the page, a deep shade on ink and brand (with the dark Shiki theme), the deepest neutral under muted in the dark scheme. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding and the gap between the columns ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import FeatureCode from '@/components/moonarc/pro/FeatureCode.astro';
---
<FeatureCode
  headline="Connect your agent in one command"
  copy="The server gives your coding agent read access to builds and a tool to open a pull request."
  points={['Read-only tokens by default', 'Every call is in the audit log', 'Works with any client that speaks MCP']}
  label="Client"
  tabs={[
    { label: 'Terminal', code: 'npx your-cli connect' },
    { label: 'JSON', lang: 'json', code: '{\n  "mcpServers": {\n    "your-server": { "url": "https://mcp.example.com/mcp" }\n  }\n}' },
  ]}
/>
```

## Reduced motion

The tabs switch in place without the fade and the indicator jumps; nothing of the section moves.

## With ClientRouter

Inherits CodeTabs; CopyButton rebinds through the shared runtime.

## Craft

- The section is a size container, so it lays out by its own width: side by side from 58 rem, the code under the text below that, in a sidebar and on a phone alike.
- The code block is set through CodeTabs' tokens (--ma-panel, --ma-ink, --ma-edge, --ma-dark, --ma-codetabs-radius, --ma-codetabs-shadow, --ma-codetabs-font), never its properties: two stylesheets on a page land in either order, and a token cannot lose a tie.
- A painted tone does not paint the code: on ink and brand the panel is a deep shade of the ground and the dark Shiki theme is picked, because the light theme's dark tokens would sit on a dark ground.
- The copy button in the tab bar has no plate and no border on any tone: CodeTabs clears both through CopyButton's own tokens.

## Replaces

- Code block feature section (Tailwind Plus)
- Terminal feature (Magic UI)

## Source

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