Offer Shelf

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/offer-shelf

---
import OfferShelf from '@/components/moonarc/pro/OfferShelf.astro';
---
<OfferShelf
  eyebrow="Work with me"
  offers={[
    { name: 'The first thousand', kind: 'Course · 8 modules', price: '$149', note: 'Build a list of a thousand readers without ads.', href: 'https://shop.example.com/first-thousand', action: 'Enrol', includes: ['Choosing a topic', 'The welcome email', 'Your first ten issues'], featured: true },
    { name: 'Pricing in public', kind: 'Guide · 64 pages', price: '$19', href: '/shop/pricing-guide/', action: 'Buy the guide' },
    { name: 'One hour', kind: 'Session · 1 hour', price: '$90', href: '/book/', action: 'Book a session' },
  ]}
>
  <span slot="headline">Everything I <em>sell</em></span>
</OfferShelf>

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

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 cover is a colour block with the offer's name set large on it, a drawing in the corner and the kind on a band, so a shelf of offers is a row of covers with no photograph and no design file.
• The cover lifts and leans from its bottom edge while the pointer is on the card, on the theme's spring, so it reads as a thing taken off a shelf. Touch screens get the still cover.
• The cover repeats what the text under it says, so it is hidden from assistive technology. The kind, the name, the note and the price are real text, and a course's modules sit in a native details element that opens from the keyboard without a script.
• A featured card spans two of the three columns on a wide box, so the rows fill when the featured offer comes first and the offers plus one make a multiple of three: 2, 5 or 8 offers with one featured.

Replaces: Creator storefront pages (Gumroad, Teachable) · Product list sections (Tailwind Plus). See the migration table.

Related