Ticket Aspect Ratio

Component

About

A fixed aspect-ratio media container styled like a ticket stub, with preset ratios, framed borders, punch notches, corner registration guides, and a label banner for images or video.

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

Code

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

Usage.tsx

import { AspectRatio } from "@/components/ui/aspect-ratio-ticket";

export default function AspectRatioTicketDemo() {
  return (
    <div className="flex w-full max-w-md items-center justify-center bg-background p-8">
      <AspectRatio
        ratio="16:9"
        perforated
        cornerGuides
        cornerNotches
        label="STAGE SCREEN"
      >
        <div className="flex size-full items-center justify-center bg-secondary/40 font-mono text-xs text-muted-foreground">
          PROPORTIONAL STAGE FEED
        </div>
      </AspectRatio>
    </div>
  );
}