Ticket sheet

Component

About

A sheet of perforated tickets, one per option. Picking one tears it off. A radio group underneath. Skeuomorphic, accessible, Base UI. Part of Bevel: bevel-ui.vercel.app

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ticket sheet to your project and fits it to your theme.

Code

How Ticket sheet is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import {
  Ticket,
  TicketLabel,
  TicketNote,
  TicketSheet,
  TicketValue,
} from "@/components/ui/ticket-sheet"

/** Plans as a sheet of tickets. Arrow keys move between them. */
export function TicketSheetPlans() {
  return (
    <TicketSheet aria-label="Plan" defaultValue="team">
      <Ticket value="solo" tone="ochre">
        <TicketLabel>Solo</TicketLabel>
        <TicketValue>$12</TicketValue>
        <TicketNote>per month</TicketNote>
      </Ticket>
      <Ticket value="team" tone="vermilion">
        <TicketLabel>Team</TicketLabel>
        <TicketValue>$48</TicketValue>
        <TicketNote>up to 10 seats</TicketNote>
      </Ticket>
      <Ticket value="firm" tone="ultramarine">
        <TicketLabel>Firm</TicketLabel>
        <TicketValue>$190</TicketValue>
        <TicketNote>unlimited seats</TicketNote>
      </Ticket>
      <Ticket value="custom" tone="emerald" disabled>
        <TicketLabel>Custom</TicketLabel>
        <TicketValue>Talk</TicketValue>
        <TicketNote>sold out this quarter</TicketNote>
      </Ticket>
    </TicketSheet>
  )
}

export default TicketSheetPlans