Browse components
Duration Picker
Hours, minutes and a save button fused into one bar that pulls apart on a liquid thread while you edit.
Credit: Calamansi UI (MIT)
Installation
npx shadcn@latest add @glint-ui/duration-pickerFirst 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/duration-picker.json
Usage
import { DurationPicker } from "@/components/ui/duration-picker";
const [value, setValue] = useState({ hours: 1, minutes: 30 });
<DurationPicker value={value} onChange={setValue} onConfirm={save} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "calamansi" | "white" | "slate" | "citrus" | "calamansi" | Palette the save button and the bead wear. |
| size | "sm" | "md" | "lg" | "md" | Bar height, and with it the corner, travel and field widths. |
| maxHours | number | 24 | Ceiling for the hours field. |
| maxMinutes | number | 60 | Ceiling for the minutes field. |
| hoursLabel | string | "Hr." | Unit after the hours field. |
| minutesLabel | string | "Min." | Unit after the minutes field. |
| threshold | number | 19 | Alpha ramp slope: how hard the fused edge is. |
| gooey | boolean | true | Run the metaball fuse. Off, the pieces just slide apart. |
| bead | boolean | true | Leave a drop of juice where the thread severs. |
| disabled | boolean | false | Disable editing. |
| value | ReactNode | — | Controlled `{ hours, minutes }`. |
| defaultValue | ReactNode | — | Initial `{ hours, minutes }` when uncontrolled. |
| onChange | ReactNode | — | `(value) => void`, fired on every keystroke with the clamped value. |
| onConfirm | ReactNode | — | `(value) => void`, fired on save (tick or Enter). |
| editing | boolean | — | Hold the bar open or shut (controlled). |
| defaultEditing | boolean | false | Open on mount when uncontrolled. |
| onEditingChange | ReactNode | — | `(editing) => void`, fired when the pieces split or merge. |
| gap | number | — | How far the seams open on each side, in px (defaults per size). |
| radius | number | — | Override the corner radius in px. |
| viscosity | number | — | Fuse blur in px. Defaults to 0.55 of the gap. |
| className | string | — | Extra classes for the root element. |