Event Ticket Tiers

Installation

pnpm dlx shadcn@latest add @cleverui/event-ticket-tiers

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { EventTicketTiers } from '@/components/blocks/event-ticket-tiers'

Exampletsx

import { EventTicketTiers } from '@/components/blocks/event-ticket-tiers'

export default function EventTicketTiersDemo() {
  return (
    <div className="mx-auto w-full">
      <EventTicketTiers
        eyebrow="SAT 26 JULY · THE TIVOLI"
        heading="Tickets"
        buyLabel="Get tickets"
        note="All prices include booking fees. Doors 7:00 PM · 18+ with photo ID."
        tiers={[
          {
            name: 'General',
            price: '$89',
            priceNote: 'Standing · main floor',
            serial: 'NO. 000481',
            perks: [
              'Full lineup access',
              'Cloakroom included',
              'Festival poster PDF',
            ],
            href: '#general',
          },
          {
            name: 'Reserved',
            price: '$145',
            priceNote: 'Seated · balcony',
            serial: 'NO. 000182',
            perks: [
              'Assigned seat with sightline',
              'Express entry lane',
              'Programme booklet',
              'One drink voucher',
            ],
            featured: true,
            ctaLabel: 'Reserve seat',
            href: '#reserved',
          },
          {
            name: 'VIP Box',
            price: '$280',
            priceNote: 'Private box · 4 seats',
            serial: 'NO. 000041',
            soldOut: true,
            perks: [
              'Private box for four',
              'Dedicated host',
              'Complimentary bar tab',
              'Meet-and-greet lottery entry',
            ],
          },
        ]}
      />
    </div>
  )
}

API reference

EventTicketTiers accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Tickets'`	–
`eyebrow`	`string`	–	dated mono kicker, preformatted, never derived from Date
`tiers`*	`TicketTier[]`	–	–
`buyLabel`	`string`	`'Get tickets'`	fallback CTA label when a tier omits its own
`note`	`string`	–	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface TicketTier {
  name: string
  /** preformatted, e.g. '$89' */
  price: string
  priceNote?: string
  perks: string[]
  /** stub number, e.g. 'NO. 000481' */
  serial?: string
  soldOut?: boolean
  featured?: boolean
  ctaLabel?: string
  href?: string
}

Related components

Event Countdown Hero

The event's own countdown hero, oversized date numerals, a mono venue line, poster-scale rolling countdown digits, and one ticket CTA. Doors open in exactly this long.

Sponsor Tier Wall

Sponsors ranked the way posters rank them, headline wordmarks set huge, partners mid, community small, grouped under mono tier labels on hairline rules. No logo files needed.

Agenda Day Picker

Day pills over a single-track agenda, pick a day, read its sessions down a mono time rail. One room, one running order, real tablist semantics.

Event CFP Block

A call-for-proposals block, poster heading, mono deadline rail, talk formats with durations, and one submit CTA. React and Tailwind CFP section for conference sites.

Event Code of Conduct

A code-of-conduct and accessibility block, a confident pledge set large, provisions as a dl grid, and real report channels. React and Tailwind trust section for events.

Event Lineup Board

A poster-type lineup board, acts in oversized weight-contrast rows, stage and time in mono, day tabs with real tablist semantics. The bill is the artwork.

Frequently asked questions

How do I install the Event Ticket Tiers component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/event-ticket-tiers`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Event Ticket Tiers require?

Event Ticket Tiers uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Event Ticket Tiers to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code