React Bits

Lanyard

Swinging 3D badge on a stretchy woven band that you can drag, throw or click to flip.

Lanyard, a React Bits component

Use Lanyard in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/Lanyard-TS-TW
How to install React Bits components

Related components

  • Stack

    Pile of cards you can drag, flick or click through, with thrown cards tucking underneath.

  • Circular Gallery

    A curved image gallery you can drag, scroll or tab through, with cards that open to the full image.

  • Flying Posters

    3D posters that twist and flip as you scroll or drag through an endless column.