Pro
Pull cord
A light switch on a pull cord. Pull the bead down past the click point and let go to switch; the cord springs back up, bounces and sways with the sideways pull you gave it.
pnpm dlx shadcn@latest add @caliper/pull-cordWhen to use
Use it for
- Theme or lighting switches on expressive marketing pages and playful apps.
- A single delightful toggle in an otherwise calm interface.
Skip it when
- Settings lists; use `Switch`.
- Anything people toggle often.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- A click point
- Past a short pull the cord stiffens, as if it has met the switch; letting go there switches it.
- A spring, not a curve
- The bead is a damped spring, so it overshoots, bounces and sways by how it was pulled.
Usage
- A switch
- It is a switch to assistive technology; a click, Enter or Space tugs it.
Installation
pnpm dlx shadcn@latest add @caliper/pull-cord
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.
import { PullCord } from "@/components/ui/pull-cord"
The worked example comes with Pro
The 29-line example behind the preview opens here, ready to copy.
- 602 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
API reference
PullCord
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes switch semantics, with aria-hidden, aria-checked and aria-label kept in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Switch
- Theme switchA light and dark toggle that changes at once or reveals the new theme with a circle, seam or wipe.
- LanyardA 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.