Cohesion

The two rendering paths are meant to be invisible to a reader. An Astro part ships no JavaScript and a React component ships Radix behavior, but a button is the same button either way: the same radius, the same edge, the same focus ring, the same row height.

This page is where that is checked rather than asserted. Each pair is the Astro part on the left and its React counterpart on the right, with the same content in both, so a value that has drifted shows up as a step between the columns. The docs suite measures the button pair on every run; everything else is read by eye.

Two vocabularies do not pair one for one, and the page does not pretend they do. Button calls its outlined step secondary where shadcn calls it outline, and Badge’s tinted advisory tones — info, success, warning — have no shadcn counterpart, so only the three shapes that do correspond are shown.

Astro

PrimarySecondaryGhostDanger

SmallMediumDisabled

Astro

NeutralAccentDanger

SmallMedium

Astro

Consuming the package

The Astro parts take their data through props, so nothing in them knows what a product or a demo is.

Read the guide

Skip

Astro

npmImport

npm install @ambiqai/helia-ui

import Button from '@ambiqai/helia-ui/astro/Button';

Astro

Ships with the package

Tokens, the Astro parts, the React layer and the Starlight plugin.

Ships with the consuming site

The scan list, the site theme, and every island that composes the React layer.

React

PrimarySecondaryGhostDanger

SmallMediumDisabled

React

NeutralAccentDanger

SmallMedium

React

Consuming the package

The React layer takes its data through props, so nothing in it knows what a product or a demo is.

Read the guideSkip

React

npmImport

npm install @ambiqai/helia-ui

React

Ships with the package

Tokens, the Astro parts, the React layer and the Starlight plugin.

Ships with the consuming site

What holds the pairs together

Nothing on this page is drawn twice. The shape, the edge, the ring and the motion all come from the same tokens; what differs is only which file reads them.

• shadcn.css aliases every shadcn variable onto a hub token, and names the scales shadcn writes against — the radius ladder, the type ramp, the spacing unit, the three motion steps — so a generated class cannot introduce a value the hub has not already named.
• The control heights are tokens, --helia-control-sm, --helia-control-md and --helia-control-lg. A recipe and a class string that both read one of them land on the same row.
• The focus ring is one outline: 2px at a 2px offset, drawn in --helia-focus-ring-color, whether it arrives as .helia-focus-ring or as focus-visible:outline-2.
• shadcn add rewrites the file it regenerates. Re-run node packages/helia-ui/scripts/rename-token-prefix.mjs --root . after an add to put the token-mapped class strings back.