103 Pro components and page blocks

Get Pro
uibrik

Time Morph

Pro

Preview

Customize

12-hour
5
5

Installation

Pro

Time Morph is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/time-morph

Usage

import { TimeMorph } from "@/components/uibrik/time-morph/time-morph";​<TimeMorph  hourCycle={12}  minuteStep={5}  rows={5}  disabled={false}  defaultValue="09:30"  defaultOpen={false}  label="Time"  // value="…"  // onChange={(value) => {}}  // open={false}  // onOpenChange={(open) => {}}/>

Props

TimeMorph
hourCycle
Type 12 | 24
12
12 shows 1–12 with an AM/PM wheel; 24 shows 00–23.
minuteStep
Type 1 | 5 | 10 | 15 | 30
5
Minutes between values on the minute wheel.
rows
Type 3 | 5 | 7
5
Rows visible while open.
disabled
Type boolean
false
Show the time without letting it change.
value / onChange
Type string / (value) => void
–
Controlled time as "HH:mm" in 24-hour form. onChange fires when the wheels close on a new time.
defaultValue
Type string
"09:30"
Time on mount when uncontrolled.
open / onOpenChange
Type boolean / (open) => void
–
Controlled open state. Clicking outside, Enter or tapping the middle row keeps the new time; Escape reverts it.
defaultOpen
Type boolean
false
Open on mount when uncontrolled.
label
Type string
"Time"
Accessible name.
className
Type string
–
Classes for the wrapper.