Componentticket-stub0.44 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use Lanyard when a ticket stub surface needs Strap with clip that sways gently from the top and holds an attached card slot for children. Keep props minimal and prefer composition with sibling stubs.

Avoid Lanyard for long form flows or dense data grids where a dedicated layout block fits better.

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
children?	React.ReactNode