Orvain UI

Range time picker, day bar

Seeing a whole day of hours at once, and what it means in another time zone.

Get Pro to installPro12 blocksReact, Vue and Figma
MCPConnect the MCP server

Office hours

Fridays · 2 ranges · 6 h

London · GMT

click or drag the bar to add
9:00–12:00
2:00–5:00

New York · GMT−5

  • 9:00 am – 12:00 pm · 3 h4:00 – 7:00 am in New York
    Night in New York
  • 2:00 – 5:00 pm · 3 h9:00 am – 12:00 pm in New York

More in Time Pickers#

Date & time wheels

Booking a slot in one card: a real calendar, then hour, minute and am / pm wheels on one lens

Date & time wheels, one lens

Picking day and time as one sentence: the headline is the answer

Date & time wheels, open slots

Wheels that only stop on free times, read in either zone

Date & time ruler

The same booking flow with a glanceable time: the picked day named, the minute read out over a ruler you can fling

Date & time ruler, slot on the day

Booking where the session is drawn to scale on the day, hatched where it is taken

Alarm time picker

A reminder that turns on, takes a note and picks how long before it rings

Range time picker

Availability windows, quiet hours, opening times: several From / To spans per day

Range time picker, day bar

Seeing a whole day of hours at once, and what it means in another time zone

Range time picker, typed

Hours for several days, entered from the keyboard

Pop-over time picker

Durations and countdowns set in place: a trigger that names the timer and opens hour, minute and second spinbuttons

Pop-over time picker, presets

Timers that usually come from a few presets, then a fine-tune

Pop-over time picker, live

A picker that becomes the running timer

When to use#

  • Booking a slot, where the time is picked from what is offered rather than typed
  • Opening hours and availability, with several From and To spans per day
  • An alarm or a reminder measured in minutes
  • A countdown or a duration composed from hours, minutes and seconds

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans