Componentticket-stub

BackstagePass

Laminated ALL ACCESS pass with lanyard hole, rotated stripe strip, shine sweep on hover and fake barcode.

Preview

Live Preview

ALL ACCESS

NAME

VIP Member

COMPANY

COMPANY NAME

Installation

Tokens guide →

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

npx bigbullui add backstage-pass

Or install the full npm package:

npm install bigbullui

Usage

import { BackstagePass } from "@/components/ui/backstage-pass";

<BackstagePass holderName="VIP MEMBER" zone="PIT" />

Source code

backstage-pass.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 BackstagePassProps {
  holderName?: string;
  className?: string;
}

export function BackstagePass({ holderName, className }: BackstagePassProps) {
  return (
    <div
      className={cn(
        "relative size-56 rounded-lg border border-border bg-card p-6 motion-reduce:transition-none",
        "group"
      )}
    >
      <div className="absolute top-2 right-2 flex items-center gap-2">
        <div
          className="font-mono text-[8px] uppercase tracking-[0.15em] text-white bg-destructive px-2 py-1 rounded"
        >
          ALL ACCESS
        </div>
      </div>

      <div className="absolute top-3 left-3 size-3 rounded-full bg-destructive" />

      <div className="mt-6 grid grid-cols-2 gap-2">
        <div>
          <div className="font-mono text-[9px] uppercase tracking-[0.1em] text-muted-foreground">NAME</div>
          <div className="font-mono text-[11px] font-medium">{holderName || "HOLDER NAME"}</div>
        </div>
        <div>
          <div className="font-mono text-[9px] uppercase tracking-[0.1em] text-muted-foreground">COMPANY</div>
          <div className="font-mono text-[11px]">COMPANY NAME</div>
        </div>
      </div>

      <div className="mt-4 h-2 bg-border/30 rounded w-full" />
    </div>
  );
}

Props

Prop	Type	Description
holderName	string	Printed holder name.
zone	string	Access zone row.
className	string	Additional classes.