Feature with Code

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.

Give your coding agent the Moonarc catalogue

Add the MCP server once and the agent searches components by intent and byte budget, reads their craft notes and gets the command that installs them.

search_motion: Components for an intent under a JavaScript budget in raw bytes.
get_component: Source, props and craft notes: easing, duration, the reduced-motion branch, ClientRouter behaviour.
get_install_command: The exact command.

Claude CodeCursorVS CodeCodex

# in your project
claude mcp add moonarc -- npx -y @moonarc/mcp

// .cursor/mcp.json
{
  "mcpServers": {
    "moonarc": { "command": "npx", "args": ["-y", "@moonarc/mcp"] }
  }
}

// .vscode/mcp.json
{
  "servers": {
    "moonarc": { "type": "stdio", "command": "npx", "args": ["-y", "@moonarc/mcp"] }
  }
}

# ~/.codex/config.toml
[mcp_servers.moonarc]
command = "npx"
args = ["-y", "@moonarc/mcp"]

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript of its own

0 B

Uses CopyButton and the shared runtime (1.9 kB raw, once per site). With those included: 2.5 kB raw.

CSS 18.6 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 105 · Firefox 121 · Safari 15.4; needs has, clipboard. Elsewhere: the tabs switch without the fade; below 58 rem of the section's width the code follows the text.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/feature-code

src/pages/index.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}' },
  ]}
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: code-tabs.

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.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-feature-code.ma-feature-code__actions.ma-feature-code__aside.ma-feature-code__code.ma-feature-code__copy.ma-feature-code__eyebrow.ma-feature-code__headline.ma-feature-code__inner.ma-feature-code__points.ma-feature-code__text.ma-feature-code__tick

Slots

slot="eyebrow"slot="headline"slot="copy"slot="actions"slot="aside"

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.

Why it is built this way

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). See the migration table.

npmpnpmbun

npx astro add moonarc

pnpm astro add moonarc

bunx astro add moonarc

Code Tabs

A code block with tabs (for example npm, pnpm, bun) and a copy button per panel.

every browserclick

npx astro add moonarc

click · check · back

Copy Button

A button that copies text to the clipboard: the icon turns into a check, the label says "Copied", and both come back after the ambient duration.

every browserclick

scroll inside

01 · tools that run on your code

Audits that run on your code

audit_motion checks your components and styles against 13 rules, among them transition: all, transitions and keyframes on layout properties, motion with no prefers-reduced-motion branch, hover motion that fires on touch, and astro:page-load listeners with no teardown.

The CI recipe →

pull request comment

$ npx -y @moonarc/mcp audit src
moonarc audit · 1 files · 2 errors, 1 warnings, 1 notes

  error src/components/Hero.astro:7  [transition-all] `transition: all` animates every property, including layout
  error src/components/Hero.astro:11  [page-load-listener] `astro:page-load` listener without an `astro:before-swap` teardown
  warn  src/components/Hero.astro:1  [no-reduced-motion] file animates but has no reduced-motion branch
  info  src/components/Hero.astro:1  [hover-not-gated] :hover motion not gated on (hover: hover)

02 · a cadence you can audit

New components every month

New components every month, each listed with its date in a public changelog, so you can check the cadence before you pay.

The changelog →

changelog · public, dated

2026-10-09Endpoint, Homescreen, Estate, Practice and Stay, templates for developer products, mobile apps, estate agents, practices and places to stay, and thirty sections

2026-10-07this site in Plus Jakarta Sans and JetBrains Mono

2026-10-06the terms, privacy and refunds, checked against Indonesian law

Feature Rows

Pro

Shows features in alternating rows of copy and a visual.

Chrome 115 · not Firefox · Safari 26scroll

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown