Package Cards

Live demo

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

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:

npx shadcn@latest add @moonarc-pro/package-cards

---
import PackageCards from '@/components/moonarc/pro/PackageCards.astro';
---
<PackageCards
  headline="Monthly packages"
  packages={[
    { name: 'Starter', tagline: 'One channel, kept alive', price: '4.5 m', unit: 'a month', includes: ['12 posts', 'Captions', 'A monthly report'], href: '/contact/?package=starter' },
    { name: 'Growth', tagline: 'Two channels and ads', price: '8 m', unit: 'a month', includes: ['20 posts', '8 short videos', 'Ads set-up'], bonus: 'First month: a free shoot', href: '/contact/?package=growth' },
    { name: 'Custom', tagline: 'For groups and launches', includes: ['Everything above', 'A team on call'], href: '/contact/?package=custom' },
  ]}
/>

Without a key the registry answers 401 with an upgrade message.

Props

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.

Why it is built this way

• The price is the largest thing on the card after nothing: a package is chosen by what it costs and then by what it holds.
• "Price on request" is set a size smaller than a price, so a quoted package does not shout louder than a priced one.
• The action names the package ("Ask about Growth"), so a page of three cards has three distinct links, not three "Learn more".
• The lift is one hover step and the shadow does not grow: the card answers the pointer without leaving the grid.

Replaces: Pricing cards (Tailwind Plus) · Package cards (Framer agency templates). See the migration table.

Related