A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Time Picker

Time picker with hour/minute/second spinners

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/time-picker

Usage

import { TimePicker } from "@/components/ui/time-picker";

<TimePicker
  label="Meeting time"
  value={{ hours: 14, minutes: 30 }}
  onChange={(time) => console.log("Changed:", time)}
  onSubmit={(time) => console.log("Submitted:", time)}
/>

API Reference

TimePicker

Prop	Type	Default
`value`	`{ hours: number; minutes: number }`	-
`onChange`	`(time: { hours: number; minutes: number }) => void`	-
`onSubmit`	`(time: { hours: number; minutes: number }) => void`	-
`label`	`string`	-
`format`	`12 \| 24`	`24`
`autoFocus`	`boolean`	`false`
`id`	`string`	-

Form Field Wizard

On This Page

Installation Usage API Reference TimePicker

Edit this page Follow @shadcnlabs Join community