Zero-dependency · Framework-agnostic · SSR-safe
Precise time
input, for the web.
A time picker with an analog clock, scroll wheel, and compact-wheel modes. 12 themes, full TypeScript types, and plugins that tree-shake out when unused.
Capabilities
What it does
12h / 24h formats
Switch clock format at runtime, with AM/PM or 24-hour output.
Three UI modes
Analog clock, scroll wheel, and compact-wheel - one option to swap.
12 built-in themes
Material 2/3, Crane, Dark, Glassmorphic, Cyberpunk, Pastel, AI, Blueprint.
Framework-agnostic
Vanilla JS core. Works in React, Vue, Angular, Svelte.
TypeScript types
Full type definitions and grouped, autocompleted options.
Inline mode
Render the picker in-page without a modal overlay.
Keyboard & ARIA
Focus trap, arrow-key selection, screen-reader labels.
SSR-safe
No top-level DOM access. Runs under Next.js and Nuxt.
Tree-shakeable plugins
Range, timezone, and wheel ship only when imported.
Interactive
Try it here
Analog clock
Default 12-hour
Mobile view
Touch input
Range plugin
Start & end
Wheel plugin
Scroll spinner
Setup
Three lines to a picker
Install, import, and call create(). No build step, no wrapper required.
- npm, yarn, or pnpm
- ESM and CJS builds
- Typed options with autocomplete
- Drop into any existing input
1import { TimepickerUI } from 'timepicker-ui';2import 'timepicker-ui/index.css';34const input = document.querySelector('#timepicker');5const picker = new TimepickerUI(input, {6 clock: { type: '24h' },7 ui: { theme: 'dark' },8});910picker.create();
Going further
Built for real apps
Disabled time
Block specific hours, minutes, or intervals.
Grouped options
clock, ui, labels, behavior, callbacks - merged and validated.
Localization
Replace every label for any language.
Custom styling
Override CSS variables or author a full theme.
Instance registry
getById, getAllInstances, destroyAll.
Events & callbacks
Subscribe to selection, confirm, cancel, and clear.
Open source · MIT
If it saved you an afternoon
Built and maintained by one person, with zero runtime dependencies, no funding, and no telemetry. A star is the quiet signal that says it's worth the next release.
Next milestone