# Pull Cord

> A light-switch cord you tug to flip the theme.

Hang it from the top of a header or a panel. Drag the bead down and let go: it pulls, then springs back with a sway. Made for theme switches, 'lights out' modes and hidden easter eggs, and just as happy as a plain button from the keyboard.

- Family: Originals
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/pull-cord/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add pull-cord
```

It installs to `components/galactrex/pull-cord.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { PullCord } from "@/components/galactrex/pull-cord";

<PullCord label="Switch theme" onPull={() => setDark((d) => !d)} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onPull` | `() => void` | — | Called once per pull past the threshold. |
| `label` | `string` | — | What a pull does, for assistive tech. |
| `length` | `number` | `96` | Resting cord length in px. |
| `threshold` | `number` | `44` | How far past rest counts as a pull. |
| `handle` | `ReactNode` | — | A custom handle instead of the bead. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Theme switch.** Toggle dark and light on pull.
- **Custom handle.** Pass a tiny icon or a tag as `handle`.

## Accessibility

- The handle is a real button named by `label`; Space, Enter or a click pulls it.
- Dragging is an extra, never the only way.

## Motion

- Spring with low damping for the sway; the cord is a single SVG curve following motion values.
- Reduced motion: no sway, the pull still works.