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
AM/PM or 24-hour output, with optional seconds. Switch at runtime.
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
Arrow keys on the fields and the clock face, focus trap, 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
import { TimepickerUI } from 'timepicker-ui';import 'timepicker-ui/index.css';const input = document.querySelector('#timepicker');const picker = new TimepickerUI(input, {clock: { type: '24h' },ui: { theme: 'dark' },});picker.create();
Going further
Built for real apps
Disabled time
Block specific hours, minutes, or time ranges.
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