Ticket Card

Cards

About

An event ticket card with a perforated stub that loosens on hover and tears away with an animation when clicked.

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

Code

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

Usage.tsx

"use client";

import { TicketCard } from "@/components/ui/ticket-card";

export default function Demo() {
  return (
    <div className="flex min-h-full w-full items-center justify-center bg-[#0b080d] p-8 [container-type:inline-size]">
      <TicketCard
        event="Northstar Build Summit"
        venue="Harbour Hall · Level 2 · Main Stage"
        date="Sat 24 Oct"
        time="09:00"
        seat={[
          { label: "Row", value: "C" },
          { label: "Seat", value: "14" },
          { label: "Gate", value: "2" },
        ]}
        code="NS-24-0417-C14"
      />
    </div>
  );
}