# Steps and opening hours

> 15-minute steps limited to 08:30 to 17:30, with out-of-range hours disabled.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-time-picker-6).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-time-picker-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-time-picker-6-light-44e215c055346641.png
- Registry item: https://reui.io/r/new-york-v4/c-time-picker-6.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-time-picker-6.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `field`, `@reui/time-picker`

## Files

### `c-time-picker-6.tsx`

```tsx
import { TimePicker } from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="pickup-time-label" htmlFor="pickup-time">
          Pickup time
        </FieldLabel>
        {/* Hours outside the window are disabled. With no value the columns
            open on 08:30, the first time that can be chosen, and picking 08
            lands on 08:30 because 08:00 and 08:15 are before opening. */}
        <TimePicker
          id="pickup-time"
          minuteStep={15}
          min="08:30"
          max="17:30"
          aria-labelledby="pickup-time-label"
          aria-describedby="pickup-time-description"
        />
        <FieldDescription id="pickup-time-description">
          Open 08:30 to 17:30.
        </FieldDescription>
      </Field>
    </div>
  )
}
```