time-picker-demo

PreviousNext
Docs
diceuiexample

Preview

Loading preview…
examples/time-picker-demo.tsx
import {
  TimePicker,
  TimePickerContent,
  TimePickerHour,
  TimePickerInput,
  TimePickerInputGroup,
  TimePickerLabel,
  TimePickerMinute,
  TimePickerPeriod,
  TimePickerSeparator,
  TimePickerTrigger,
} from "@/registry/default/ui/time-picker";

export default function TimePickerDemo() {
  return (
    <TimePicker className="w-[280px]">
      <TimePickerLabel>Select Time</TimePickerLabel>
      <TimePickerInputGroup>
        <TimePickerInput segment="hour" />
        <TimePickerSeparator />
        <TimePickerInput segment="minute" />
        <TimePickerInput segment="period" />
        <TimePickerTrigger />
      </TimePickerInputGroup>
      <TimePickerContent>
        <TimePickerHour />
        <TimePickerMinute />
        <TimePickerPeriod />
      </TimePickerContent>
    </TimePicker>
  );
}

Installation

npx shadcn@latest add @diceui/time-picker-demo

Usage

import { TimePickerDemo } from "@/components/time-picker-demo"
<TimePickerDemo />