How to Add a Time Picker to a React App

Before installing the Time Picker, confirm your React project has what Drivn assumes: Tailwind CSS v4 processing your styles and a @/ path alias pointing at your source directory — the component ships as a .tsx file, so TypeScript is part of the stack. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; the installation page lists the minimal config for a custom setup. Unlike a plain Input, the Time Picker composes two other Drivn components — the Popover for its dropdown surface and the Input for the native fallback — so the CLI resolves and writes those alongside it if they are not already present. And because it opens a popover and runs a scroll effect, its source carries a 'use client' directive: render it inside a client component, not directly in a Server Component.

Run the CLI from your project root to add the Time Picker source. Because the picker builds on the Drivn Popover and Input, the command resolves those dependencies and writes time-picker.tsx next to popover.tsx and input.tsx if they are not already there — one command, all three files, no runtime package to version-lock. The prompt defaults the install directory to src/components/ui/; the CLI docs cover the flags for targeting a custom path or adding several components at once. After install the files are yours: a future Drivn release will not overwrite your edits, and the whole picker — from the styles object to the Column sub-component and its scroll effect — is one short file you can read top to bottom. Commit it for a clean baseline before rendering it.

The simplest use is a controlled TimePicker in its default 24-hour mode. Mark your wrapper 'use client', hold the selected time in React.useState<Date | undefined>(), and pass selected and onSelect. The trigger shows a Clock icon with the formatted time, or the Pick a time placeholder when nothing is chosen. Opening it reveals two scrolling columns — hours 00–23 and minutes 00–59 — and a React.useEffect auto-centres the current value in each column so the selected number sits mid-list rather than at the top. Tapping a value calls onSelect with a fresh Date, so the time flows back to your component as a real Date you can store, format, or submit. This is the right default for most scheduling fields; the full prop list is on the Time Picker reference.

To render a twelve-hour clock, pass format="12h". The hours column then runs 1–12 and an AM/PM switch appears beside the columns; internally the component derives the period from whether the hour is twelve or more and converts your AM/PM choice back to a 24-hour Date with its to24 helper, so onSelect always hands you a standard Date regardless of display. Add showSeconds for a third Sec column running 00–59, built from the same Column sub-component as the others, so it scrolls and auto-centres identically. When the built-in toLocaleTimeString label is not what you want — a specific locale, a shorter string — pass a formatTime function that receives the Date and returns the trigger text, leaving the columns untouched. Each of these is a plain prop on the same component, so moving from a bare 24-hour picker to a localized 12-hour clock with seconds is three attributes, not a rewrite. See the Time Picker examples for more layouts.

When you would rather submit a value than manage a popover, the TimePicker.Input sub-component renders the Drivn Input as a native <input type="time">. It takes the same selected and onSelect pair, deriving its HH:MM value from the Date and parsing the browser's time control back into a Date on change. Give it a name and its value posts with the surrounding <form>, so a server handler reads it straight off the submitted data — and it accepts native min, max, and step attributes, for example step={900} to snap to fifteen-minute increments. The wrapper still owns the Date in state, so mark it 'use client', but the field itself submits like any other form control. This is the lighter choice for a settings row or a filter, where the native mobile time UI is worth more than the scrolling dropdown.