Ticket Tiers

Pass-level list where a highlighted tier picks up a primary ring and sold-out rows dim with a note.

Conference passes

Student· 42 left

$89

Early bird· 18 left

$249

Standard· 124 left

$399

VIP· Sold out

$1,200

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Event7 } from "@/components/beste/piece/event7";

<Event7
  heading="Conference passes"
  tiers={[
    {
      "name": "Student",
      "price": "$89",
      "remaining": 42
    },
    {
      "name": "Early bird",
      "price": "$249",
      "highlighted": true,
      "remaining": 18
    },
    {
      "name": "Standard",
      "price": "$399",
      "remaining": 124
    },
    {
      "name": "VIP",
      "price": "$1,200",
      "soldOut": true
    }
  ]}
/>