Componentticket-stub

DrinkTicket

Perforated drink coupon with glyph, GOOD FOR ONE copy and a tear-off stub that rotates on hover.

Preview

Live Preview

••

GOOD FOR ONE

DRINK TICKET

DRINK-00123

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add drink-ticket

Or install the full npm package:

npm install bigbullui

Usage

import { DrinkTicket } from "@/components/ui/drink-ticket";

<DrinkTicket code="DRINK-00123" />

Source code

drink-ticket.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface DrinkTicketProps {
  code?: string;
  className?: string;
}

export function DrinkTicket({ code, className }: DrinkTicketProps) {
  return (
    <div
      className={cn(
        "relative rounded-lg border border-dashed border-border bg-card p-6 motion-reduce:transition-none",
        "group"
      )}
    >
      <div className="font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground mb-4">
        &bull;&bull;
      </div>

      <div className="font-mono text-[9px] uppercase tracking-[0.3em] text-muted-foreground mb-4">
        GOOD FOR ONE
      </div>

      <div className="font-mono text-[11px] font-bold uppercase tracking-wider mb-4">
        DRINK TICKET
      </div>

      <div className="mt-3 font-mono text-[9px] uppercase tracking-[0.15em] text-muted-foreground">
        {code || "DRINK{00000}"}
      </div>
    </div>
  );
}

Props

Prop	Type	Description
code	string	Redeem code with dashed underline.
className	string	Additional classes.