Next.js Time Picker for the App Router

Drivn installs through a small CLI that writes the component source straight into your repository — there is no runtime package to version-lock. From the root of your Next.js 16 project run npx drivn add time-picker. The Time Picker builds on the Drivn Popover and Input, so the CLI resolves those dependencies and writes time-picker.tsx alongside popover.tsx and input.tsx if they are not already present. The CLI reference documents every flag, including targeting a custom directory or adding several components at once. After install you own the files; a future Drivn release will not overwrite them. Commit the change for a clean baseline, confirm the files landed under your UI directory, and you are ready to render the picker.

Unlike the Textarea, the Time Picker holds state: it opens a Popover and scrolls the selected cell into view with a React.useEffect, so its source begins with a 'use client' directive. That means it belongs in a client component, and because it is fully controlled you hold the selected Date yourself. Mark the wrapper 'use client', keep the value in React.useState<Date | undefined>(), and pass selected and onSelect — the component calls onSelect with a fresh Date each time the reader taps an hour, minute, or period. You can still import that wrapper into a Server Component page, so only the picker hydrates while the rest of the route stays on the server. The trigger shows a Clock icon and the formatted time, falling back to the placeholder when nothing is selected. See the installation guide for project setup.

The Time Picker defaults to a twenty-four-hour clock, rendering hours 00–23 in the first column. Pass format="12h" and it swaps to a twelve-hour clock — hours 1–12 plus an AM/PM switch beside the columns — and formats the trigger label with hour12: true. Add showSeconds to render a third Sec column for precision down to the second. When the built-in toLocaleTimeString label is not what you want, pass a formatTime function that receives the selected Date and returns your own string, which is how you localize the trigger to a cs-CZ or de-DE locale. Each of these is a prop on the same component, so moving a picker from twenty-four-hour to a localized twelve-hour clock with seconds is three attributes, not a re-implementation. See the Time Picker examples for more layouts.

When you would rather post 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. Because it is a native input, giving it a name means its value posts with the surrounding <form> — drop it into a Server Action form and read the time off FormData on the server. It also accepts native min, max, and step attributes to constrain the allowed range, for example step={900} for 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.

Every class the Time Picker renders lives in one const styles object at the top of the file you own — the trigger, the scrollable columns, each cell, and the active cell all read from a named key. There are no variant maps: to restyle the picker you edit the key. The active hour, minute, and AM/PM cells share styles.cellActive, which paints the selected value with bg-foreground text-background; the trigger reads border-input and the ring-ring focus ring, so recoloring your Tailwind tokens in theming re-themes the picker for dark and light mode automatically. Because the picker composes the Drivn Popover, the dropdown surface inherits that component's border and shadow — style it once and every popover-backed control follows. The styles keys below are copied verbatim from time-picker.ts.