Ticket Card React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import TicketCard from "./TicketCard";

export default function Example() {
  return (
    <TicketCard
      children={"THE LISTENING\nROOM"}
      stub={"ADMIT\nONE"}
      color={"#e9dac4"}
      stubColor={"#d0b693"}
      inkColor={"#35281e"}
      notchSize={14}
      interactive={true}
      style={{
        "fontSize": 32,
        "fontWeight": 600,
        "letterSpacing": "-.05em",
        "whiteSpace": "pre-line",
        "lineHeight": 1.2,
        "minHeight": 220
      }}
    />
  );
}

Using Ticket Card

Place the main content in children and the detachable-style side content in stub. colour props let each area use its own paper treatment.

notchSize controls the cut-outs along the perforation. Set interactive to false when the ticket should remain at a fixed angle.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Main ticket content; accepts any React node.
stub	ReactNode	No	undefined	Content of the detachable-looking stub; accepts any React node.
color	string	No	"#e9dac4"	Main paper colour.
stubColor	string	No	"#d4b995"	Stub paper colour.
inkColor	string	No	"#30251f"	Inherited text colour.
notchSize	number	No	14	Radius of the physical cutouts in pixels.
interactive	boolean	No	true	Enable a small pointer-driven perspective tilt.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.