# timepicker-ui > A zero-dependency, framework-agnostic, SSR-safe time picker for the web, with analog clock, scroll wheel and compact-wheel modes, 12 themes, TypeScript types and optional plugins. Version 4.5.0, MIT license. Install it with `npm install timepicker-ui`, import `timepicker-ui/main.css`, then call `new TimepickerUI(input, options).create()`. `TimepickerUI` is both the default and a named export of `timepicker-ui`. Options are grouped into `clock`, `ui`, `labels`, `behavior` and `callbacks`. `ui.mode` is `clock` (the default), `wheel` or `compact-wheel`. The two wheel modes need `WheelPlugin`, and the `range` and `timezone` options need `RangePlugin` and `TimezonePlugin`. Import each plugin from `timepicker-ui/plugins/` and register it once with `PluginRegistry.register()`. `ui.theme` takes `basic`, `crane`, `crane-straight`, `m2`, `m3-green`, `dark`, `glassmorphic`, `pastel`, `ai`, `cyberpunk`, `blueprint`, `blueprint-dark`. Every theme except `basic` has its own CSS file, for example `timepicker-ui/theme-dark.css`, and `timepicker-ui/index.css` contains all of them. React projects can use the `timepicker-ui-react` wrapper. The `timepicker-ui-mcp` package is an MCP server that lets AI assistants look up options, events and themes, generate config snippets and validate times. ## Getting Started - [Installation](https://timepicker-ui.vercel.app/docs/installation) - [Quick Start](https://timepicker-ui.vercel.app/docs/quick-start) - [Configuration](https://timepicker-ui.vercel.app/docs/configuration) - [Migrate to v5](https://timepicker-ui.vercel.app/docs/migration-guide-v5) - [Migrate to v4](https://timepicker-ui.vercel.app/docs/migration-guide) - [What's New](https://timepicker-ui.vercel.app/docs/whats-new) ## Guides - [Server Rendering](https://timepicker-ui.vercel.app/docs/guides/server-rendering) - [Testing](https://timepicker-ui.vercel.app/docs/guides/testing) - [Use with AI](https://timepicker-ui.vercel.app/docs/guides/ai) - [Troubleshooting](https://timepicker-ui.vercel.app/docs/guides/troubleshooting) ## API Reference - [Options](https://timepicker-ui.vercel.app/docs/api/options) - [Methods](https://timepicker-ui.vercel.app/docs/api/methods) - [Events](https://timepicker-ui.vercel.app/docs/api/events) - [TypeScript](https://timepicker-ui.vercel.app/docs/api/typescript) - [CSS Variables](https://timepicker-ui.vercel.app/docs/api/css-variables) - [CSS Classes](https://timepicker-ui.vercel.app/docs/api/css-classes) ## Features - [12h/24h Format](https://timepicker-ui.vercel.app/docs/features/clock-format) - [Seconds](https://timepicker-ui.vercel.app/docs/features/seconds) - [Themes](https://timepicker-ui.vercel.app/docs/features/themes) - [Inline Mode](https://timepicker-ui.vercel.app/docs/features/inline-mode) - [Mobile Support](https://timepicker-ui.vercel.app/docs/features/mobile) - [Disabled Time](https://timepicker-ui.vercel.app/docs/features/disabled-time) - [Clear Button](https://timepicker-ui.vercel.app/docs/features/clear-button) - [Validation](https://timepicker-ui.vercel.app/docs/features/validation) - [Plugins](https://timepicker-ui.vercel.app/docs/features/plugins) ## Advanced - [Custom Styling](https://timepicker-ui.vercel.app/docs/advanced/styling) - [Localization](https://timepicker-ui.vercel.app/docs/advanced/localization) - [Accessibility](https://timepicker-ui.vercel.app/docs/advanced/accessibility) ## Examples - [All examples](https://timepicker-ui.vercel.app/examples) - [Getting Started](https://timepicker-ui.vercel.app/examples/basic/getting-started) - [12h Format](https://timepicker-ui.vercel.app/examples/basic/12h-format) - [24h Format](https://timepicker-ui.vercel.app/examples/basic/24h-format) - [With Backdrop](https://timepicker-ui.vercel.app/examples/basic/backdrop) - [Without Animation](https://timepicker-ui.vercel.app/examples/basic/no-animation) - [Basic Theme](https://timepicker-ui.vercel.app/examples/themes/basic) - [Crane](https://timepicker-ui.vercel.app/examples/themes/crane) - [Crane Straight](https://timepicker-ui.vercel.app/examples/themes/crane-straight) - [Material 3 Green](https://timepicker-ui.vercel.app/examples/themes/material-3) - [Material 2](https://timepicker-ui.vercel.app/examples/themes/material-2) - [Dark Theme](https://timepicker-ui.vercel.app/examples/themes/dark) - [Glassmorphic](https://timepicker-ui.vercel.app/examples/themes/glassmorphic) - [Pastel](https://timepicker-ui.vercel.app/examples/themes/pastel) - [AI Theme](https://timepicker-ui.vercel.app/examples/themes/ai) - [Cyberpunk](https://timepicker-ui.vercel.app/examples/themes/cyberpunk) - [Blueprint](https://timepicker-ui.vercel.app/examples/themes/blueprint) - [Blueprint Dark](https://timepicker-ui.vercel.app/examples/themes/blueprint-dark) - [Inline Mode](https://timepicker-ui.vercel.app/examples/features/inline-mode) - [Mobile Version](https://timepicker-ui.vercel.app/examples/features/mobile) - [Editable Input](https://timepicker-ui.vercel.app/examples/features/editable) - [Open From a Button](https://timepicker-ui.vercel.app/examples/features/open-from-button) - [Disabled Time](https://timepicker-ui.vercel.app/examples/features/disabled-time) - [Custom Labels](https://timepicker-ui.vercel.app/examples/features/custom-labels) - [Current Time](https://timepicker-ui.vercel.app/examples/features/current-time) - [Increment Steps](https://timepicker-ui.vercel.app/examples/features/increment) - [Seconds](https://timepicker-ui.vercel.app/examples/features/seconds) - [Focus Trap](https://timepicker-ui.vercel.app/examples/features/focus-trap) - [Switch Icon](https://timepicker-ui.vercel.app/examples/features/switch-icon) - [Smooth Hour Snap](https://timepicker-ui.vercel.app/examples/features/smooth-hour-snap) - [Clear Button](https://timepicker-ui.vercel.app/examples/features/clear-button) - [Event Callbacks](https://timepicker-ui.vercel.app/examples/advanced/events) - [Custom Styling](https://timepicker-ui.vercel.app/examples/advanced/custom-styling) - [Multiple Pickers](https://timepicker-ui.vercel.app/examples/advanced/multiple) - [Dynamic Updates](https://timepicker-ui.vercel.app/examples/advanced/dynamic-updates) - [Validation](https://timepicker-ui.vercel.app/examples/advanced/validation) - [Localization](https://timepicker-ui.vercel.app/examples/advanced/localization) - [Custom Container](https://timepicker-ui.vercel.app/examples/advanced/custom-container) - [External API](https://timepicker-ui.vercel.app/examples/advanced/external-api) - [Range Mode](https://timepicker-ui.vercel.app/examples/plugins/range) - [Timezone Selector](https://timepicker-ui.vercel.app/examples/plugins/timezone) - [Wheel Mode](https://timepicker-ui.vercel.app/examples/plugins/wheel) ## React - [Introduction](https://timepicker-ui.vercel.app/react) - [Installation](https://timepicker-ui.vercel.app/react/installation) - [Quick Start](https://timepicker-ui.vercel.app/react/quick-start) - [All React examples](https://timepicker-ui.vercel.app/react/examples) - [Getting Started](https://timepicker-ui.vercel.app/react/examples/basic/getting-started) - [With Callbacks](https://timepicker-ui.vercel.app/react/examples/basic/with-callbacks) - [24h Format](https://timepicker-ui.vercel.app/react/examples/basic/24h-format) - [Controlled Value](https://timepicker-ui.vercel.app/react/examples/controlled/value) - [Multiple Pickers](https://timepicker-ui.vercel.app/react/examples/controlled/multiple) - [On Update](https://timepicker-ui.vercel.app/react/examples/controlled/on-update) - [All Events](https://timepicker-ui.vercel.app/react/examples/callbacks/all-events) - [onConfirm](https://timepicker-ui.vercel.app/react/examples/callbacks/on-confirm) - [Selection Events](https://timepicker-ui.vercel.app/react/examples/callbacks/selection) - [onCancel](https://timepicker-ui.vercel.app/react/examples/callbacks/on-cancel) - [Dark Theme](https://timepicker-ui.vercel.app/react/examples/themes/dark) - [Custom Theme](https://timepicker-ui.vercel.app/react/examples/themes/custom) - [Material 3 Green](https://timepicker-ui.vercel.app/react/examples/themes/m3-green) - [Mobile Mode](https://timepicker-ui.vercel.app/react/examples/features/mobile) - [Disabled State](https://timepicker-ui.vercel.app/react/examples/features/disabled) - [Custom Labels](https://timepicker-ui.vercel.app/react/examples/features/custom-labels) - [Time Increment](https://timepicker-ui.vercel.app/react/examples/features/increment) - [Validation](https://timepicker-ui.vercel.app/react/examples/forms/validation) - [Required Field](https://timepicker-ui.vercel.app/react/examples/forms/required) - [Form State](https://timepicker-ui.vercel.app/react/examples/forms/state) - [Changelog](https://timepicker-ui.vercel.app/docs/changelog/react) - [Core Library Docs](https://timepicker-ui.vercel.app/docs) ## Tools - [Playground](https://timepicker-ui.vercel.app/playground) ## Optional - [Changelog](https://timepicker-ui.vercel.app/docs/changelog) - [MCP Server Changelog](https://timepicker-ui.vercel.app/docs/changelog/mcp) - [Roadmap](https://timepicker-ui.vercel.app/docs/roadmap) - [Bundle Analysis](https://timepicker-ui.vercel.app/bundle-stats) - [Migrate to v3](https://timepicker-ui.vercel.app/docs/legacy-migration)