Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Lanyard

A badge on a strap that you can pick up, swing and throw. The strap only resists stretching, so it goes slack when the card is tossed up, and the card swings and twists under its clip until it hangs straight again.

Pro
pnpm dlx shadcn@latest add @caliper/lanyard
Config 26Speaker

Maya Chen

Design systems, Forma

Hall B · 14:30Lisbon, 6 Nov
Installs components/ui/lanyard.tsxDepends on none beyond ReactMotion honours reduced motion

When to use

Use it for

  • Event passes, membership cards and sign-up confirmations: "You're in".
  • A playful profile or about page.

Skip it when

  • Information people need to read at once; it is a celebration, not a record.
  • Product screens and dashboards.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Held where you hold it
The card hangs from the point you picked it up, and a throw keeps the speed of the last movement, capped so it cannot leave the frame.
A push from the keyboard
The card takes focus and Left and Right arrows swing it (Shift for a harder push); under reduced motion it simply hangs.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/lanyard

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { Lanyard } from "@/components/ui/lanyard"

The worked example comes with Pro

The 31-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

Lanyard

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
label *string—Names the badge for assistive technology, e.g. "Maya Chen's pass".
lengthnumber150Strap length in px from the top edge to the clip.

Accessibility

It exposes group semantics, with aria-hidden, aria-label and aria-roledescription kept in step with state.

KeyBehaviour
←Moves to the previous item or value.
→Moves to the next item or value.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Surfaces examples