Browse components
Lanyard
An ID badge hanging from a woven strap with verlet rope physics. Grab it, fling it and watch it swing back.
Installation
npx shadcn@latest add @glint-ui/lanyardFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/lanyard.json
Usage
import { Lanyard } from "@/components/ui/lanyard";
<div className="relative h-[32rem]">
<Lanyard name="Ada Park" role="Design Engineer" image="/me.jpg" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Ada Park" | Name printed on the badge. |
| role | string | "Design Engineer" | Role printed under the name. |
| image | string | — | Photo URL for the badge. |
| strapColor | string | "#c6f24e" | Strap and header color. |
| ropeLength | number | 170 | Strap length in px. |
| badgeWidth | number | 180 | Badge width in px. |
| gravity | number | 1 | Gravity multiplier. |
| children | ReactNode | — | Replace the default badge face. |
| className | string | — | Extra classes for the root element. |