Componentticket-stub

Wristband

Festival wristband with patterned repeating stripes, snap closure, serial and a subtle breathing animation.

Preview

Live Preview

BIGBULL 2026

Installation

Tokens guide →

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

npx bigbullui add wristband

Or install the full npm package:

npm install bigbullui

Usage

import { Wristband } from "@/components/ui/wristband";

<Wristband text="BIGBULL 2026" variant="vip" serial="WB-0421" />

Source code

wristband.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 WristbandProps {
  text: string;
  variant?: "general" | "vip" | "media";
}

export function Wristband({ text, variant = "general" }: WristbandProps) {
  const variantClasses = {
    general: "bg-secondary text-secondary-foreground",
    vip: "bg-accent text-accent-foreground",
    media: "bg-destructive text-destructive-foreground",
  };

  return (
    <div
      className={cn(
        "relative size-40 rounded-full border-2 border-border/50 bg-[var(--band-color)] p-2 text-center motion-reduce:animate-none motion-reduce:transition-none",
        variantClasses[variant],
        "group"
      )}
    >
      <div className="font-mono text-[9px] uppercase tracking-[0.15em]">
        {text}
      </div>
    </div>
  );
}

Props

Prop	Type	Description
text	string	Band label.
variant	"general" \| "vip" \| "media"	Color variant.
serial	string	Serial number.
className	string	Additional classes.