Pricing Cards

Shows pricing plans side by side, with an annual/monthly toggle that swaps every price with zero JavaScript (radios and :has), the highlighted plan wearing a travelling border beam, cards revealed with a stagger. Plans with no monthly price render without the toggle.

Free

$0/yr

MIT, forever

102 primitives, no account, no token
Runtime, GSAP and Lenis adapters
Public shadcn registry
MCP server

Set up in five minutes

Pro

$129/yr

One person, billed yearly

28 sections and 11 GPU effects, demos never gated
Every template, starting with Waitlist
audit_motion and measure_budget, locally and in CI
compose_section with a total cost
New components monthly, dated changelog
Email support within 2 working days

Not open yet: see the plan

Team

$349/yr

Up to 10 people, one invoice

Everything in Pro, for the whole team
One key for the team, locally and in CI
Move up from Pro at any time
More than 10 people: email us

Talk to us

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 Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.

CSS 13.1 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 · newly available

Chrome 105 · Firefox 128 · Safari 16.4; needs has, property. Elsewhere: a static ring on the highlighted plan.

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/pricing-cards

src/pages/index.astro

---
import PricingCards from '@/components/moonarc/pro/PricingCards.astro';
---
<PricingCards plans={[
  { name: 'Starter', monthly: 0, annual: 0, features: ['3 projects', 'Community support'], action: { href: '/signup/', label: 'Start' } },
  { name: 'Plus', monthly: 12, annual: 120, features: ['Unlimited projects', 'Priority support'], action: { href: '/checkout/', label: 'Subscribe' }, highlight: true },
]} />

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal, border-beam.

Props

Prop	Type	Default	Description
`plans`	`{ name, monthly?, annual, blurb?, features, action, highlight? }[]`	none	Plans; one can be highlighted. Leave out `monthly` on every plan for yearly-only pricing: the toggle is not rendered and each card shows its yearly price.
`currency`	`string`	`'$'`	Currency symbol.
`priceFormat`	`string`	`'{currency}{n}'`	How a price prints: {currency} is the currency prop and {n} the amount, so '{n} {currency}' puts the symbol after it.
`locale`	`string`	`unset (the number as given)`	Intl locale of the amount: its thousands separator and digits.
`perYear`	`string`	`'/yr'`	The small text after the yearly price.
`perMonth`	`string`	`'/mo'`	The small text after the monthly price.
`annualLabel`	`string`	`'Annual'`	The toggle's yearly choice.
`monthlyLabel`	`string`	`'Monthly'`	The toggle's monthly choice.
`billingLabel`	`string`	`'Billing period'`	Accessible name of the toggle's group.
`id`	`string`	`'ma-pricing'`	Radio group prefix; unique per 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. 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, so cards and fields follow the ground. Decoration is strongest on brand.
`density`	`'compact' \| 'cozy' \| 'roomy'`	`'cozy'`	Card padding and gaps ×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-pricing.ma-pricing__action.ma-pricing__annual.ma-pricing__aside.ma-pricing__billing.ma-pricing__blurb.ma-pricing__copy.ma-pricing__eyebrow.ma-pricing__features.ma-pricing__head.ma-pricing__headline.ma-pricing__monthly.ma-pricing__name.ma-pricing__plan.ma-pricing__plans.ma-pricing__price

Slots

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

Reduced motion

Cards fade in without stagger; the beam stops.

With `ClientRouter`

Inherits Reveal and BorderBeam; the toggle is a radio and resets with the page.

Why it is built this way

The billing toggle is two radios: the price swap is display on two spans, no state, no script.
Only the highlighted plan gets the beam, so it stays the one card that stands out.
Stagger 80 ms: three cards land inside a quarter second, left to right, the order you read prices.

Replaces: Pricing sections (Tailwind Plus) · Pricing (shadcnblocks). See the migration table.

Border Beam

Backgrounds

A beam of light travels around the edge of a card.

newly · Chrome 120 · Firefox 128 · Safari 16.4always

Scroll Reveal

Scroll

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

every browserscroll

	Moonarc Pro	React Bits Pro	Aceternity
Astro without a React island	yes (better)	no	no
Measured JS cost per component	yes, in CI (better)	no	no
Tools that run on your repo	audit + measure (better)	no	no
WebGL spectacle	11 so far, each tested for leaks and lost contexts	far more (better)	some
Fixed catalogue, one payment	Founding 200 only	$129–349 once	$199 once, better if that is all you want (better)

Comparison Table

Pro

Compares your product with others in an "us versus them" table.

newly · Chrome 85 · Firefox 128 · Safari 16.4scroll

Feature	Free$0	Pro$129/yr	Team$349/yr
Primitives	Included	Included	Included
Sections	Not included	28	28
Audit tools	Not included	Included	Included
People	Anyone	1	Up to 10
Client work	Included	Included	Included

Pricing Table

Pro

A feature-by-plan comparison: the highlighted plan's column lit, rows revealed with a 40 ms stagger as the table scrolls into view, and a header row that sticks when you cap the table's height.