# Ticket Tiers (Moonarc)

The tickets, as tickets: each tier a card with a perforated line under its head (a notch cut from each side), the name and the price, what it includes, how many are left (a count, and a bar that fills as the card comes into view) and its action. One tier can be featured in a colour block; a sold-out tier is stamped and loses its action; a tier not yet on sale says so. An action that leads to another site's ticket shop says that too. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/ticket-tiers` (license key required)
- Tier B · category section · trigger scroll, hover
- Readout: `<TicketTiers tiers={[{ name, price, includes, left: { sold, total } }]} />`
- Browser support: limited (Chrome 120 · not Firefox · Safari 26); elsewhere: the bars stand at their values; without masks the cards keep their corners and lose their notches
- Measured cost: 0 B JS (CSS 12.7 kB raw)
- Page: https://moonarc.dev/components/ticket-tiers/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `tiers` | `{ name, price, note?, includes, left?: { sold, total, text? }, status?, href?, action?, external?, featured?, block? }[]` | none | The tiers, in order. left.text is the count's sentence with {left} and {total}; status is on-sale, sold-out or soon; external marks an action that leads to another site. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `copy` | `string` | none | A line under the heading. |
| `includesLabel` | `string` | `'Includes'` | Accessible name of each tier's list. |
| `soldOut` | `string` | `'Sold out'` | The stamp on a sold-out tier. |
| `soon` | `string` | `'On sale soon'` | What a tier not yet on sale says in place of its action. |
| `externalLabel` | `string` | `'(on another site)'` | The words a screen reader hears after an action that leads to another site. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the section's heading; the tiers' names are one below (1 on a page whose own h1 is above them). |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import TicketTiers from '@/components/moonarc/pro/TicketTiers.astro';
---
<TicketTiers
  eyebrow="Tickets"
  tiers={[
    { name: 'One day', price: '$89', includes: ['Every talk that day', 'Lunch'], left: { sold: 120, total: 300 }, href: 'https://tickets.example/one-day', action: 'Buy one day', external: true },
    { name: 'All three days', price: '$219', includes: ['Every talk and workshop'], left: { sold: 410, total: 500 }, href: 'https://tickets.example/three-days', action: 'Buy three days', external: true, featured: true },
    { name: 'Early bird', price: '$179', includes: ['All three days'], status: 'sold-out' },
  ]}
>
  <span slot="headline">Pick <em>your days</em></span>
</TicketTiers>
```

## Reduced motion

The bars stand at their values and the cards do not lift on hover.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The notches are cut with a mask of two radial gradients, so they show the page through them on any ground, a photograph included.
- The count is text and the bar is a picture of the same number, hidden from assistive technology.
- An action that leaves for a ticket shop says so in words for a screen reader and with an arrow out for the eye.
- A sold-out tier keeps its card, dimmed and stamped, so the reader sees what they missed and what is still there.

## Replaces

- Ticket widgets (event platforms)
- Pricing tables for events

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/ticket-tiers` with a key in components.json (https://moonarc.dev/account/).