Browse components
Dodge Field
A playful yes/no prompt whose No button springs away from the cursor, leaning into each hop, until it gets tired. Keyboard users can always press it.
Installation
npx shadcn@latest add @glint-ui/dodge-fieldFirst 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/dodge-field.json
Usage
import { DodgeField } from "@/components/ui/dodge-field";
<DodgeField
question="Deploy on a Friday afternoon?"
onYes={() => ship()}
onNo={() => wait()}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| question | string | "Deploy on a Friday afternoon?" | The question above the buttons. |
| yesLabel | string | "Yes" | Yes button label. |
| noLabel | string | "No" | No button label. |
| radius | number | 80 | Px around No in which the pointer makes it flee. |
| maxDodges | number | 8 | Dodges before No gives up (0 = never). |
| color | string | "#f472b6" | Yes button and celebration color. |
| onYes | ReactNode | — | Called when Yes is chosen. |
| onNo | ReactNode | — | Called when No is finally chosen. |
| className | string | — | Extra classes for the root element. |