# Unavailable slots

> 30-minute appointment slots with the lunch hour and booked times disabled.

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-time-picker-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-time-picker-7-light-3ff7be09fa0ede0c.png
- Registry item: https://reui.io/r/new-york-v4/c-time-picker-7.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-7.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-7.tsx`

```tsx
"use client"

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

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

const BOOKED = new Set(["10:00", "14:30", "15:00"])

/* Values arrive as `HH:mm`, so plain string comparison orders them. Module
   scope keeps the function stable, and a function prop is also why this file
   is a client module although it holds no state. */
function isUnavailable(value: string) {
  return (value >= "12:00" && value < "13:00") || BOOKED.has(value)
}

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="appointment-time-label" htmlFor="appointment-time">
          Appointment
        </FieldLabel>
        {/* An hour with no free slot left is disabled whole, like 12. */}
        <TimePicker
          id="appointment-time"
          minuteStep={30}
          min="09:00"
          max="17:00"
          isTimeDisabled={isUnavailable}
          aria-labelledby="appointment-time-label"
          aria-describedby="appointment-time-description"
        />
        <FieldDescription id="appointment-time-description">
          Lunch from 12:00 to 13:00 and times already booked are unavailable.
        </FieldDescription>
      </Field>
    </div>
  )
}
```