Componentticket-stub

Lanyard

Strap with clip that sways gently from the top and holds an attached card slot for children.

Preview

Live Preview

Guest Pass

Conference 2026

Installation

Tokens guide →

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

npx bigbullui add lanyard

Or install the full npm package:

npm install bigbullui

Usage

import { Lanyard } from "@/components/ui/lanyard";

<Lanyard label="CONFERENCE 2026">
  <GuestCard />
</Lanyard>

Source code

lanyard.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 LanyardProps {
  label?: string;
  children?: React.ReactNode;
}

export function Lanyard({ label, children }: LanyardProps) {
  return (
    <div
      className={cn(
        "relative size-64 size-1/3 max-w-full rounded-md border border-border bg-card p-4 motion-reduce:transition-none",
        "group"
      )}
    >
      <div className="absolute top-1/2 -translate-y-1/2 -left-2 size-1/3 h-0.5 rounded-full bg-border/30" />
      <div className="absolute top-1/2 -translate-y-1/2 -right-2 size-4 rounded-full bg-destructive" />
      <div className="mt-2 p-2 bg-muted rounded-sm">
        {children}
      </div>
      {label && (
        <div className="font-mono text-[9px] uppercase tracking-[0.15em] text-muted-foreground mt-2">
          {label}
        </div>
      )}
    </div>
  );
}

Props

Prop	Type	Description
label	string	Mono label under the card.
children	React.ReactNode	Card content attached to the clip.
className	string	Additional classes.