# Hour only

> A daily digest send time picked by the hour in a settings row.

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

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

## Files

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

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

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export function Pattern() {
  return (
    <div className="w-full max-w-sm">
      <Item variant="outline">
        <ItemMedia variant="icon">
          <IconPlaceholder
            lucide="MailIcon"
            tabler="IconMail"
            hugeicons="Mail01Icon"
            phosphor="EnvelopeIcon"
            remixicon="RiMailLine"
            aria-hidden="true"
          />
        </ItemMedia>
        <ItemContent>
          <ItemTitle id="digest-time-title">Daily digest</ItemTitle>
          <ItemDescription id="digest-time-description">
            Mentions, replies and new tasks, once a day.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          {/* Hour granularity leaves 2 columns, hour and AM/PM, and every
              value lands on the hour ("09:00", "21:00"). The row title names
              the trigger, which adds its value: "Daily digest 09:00 AM". */}
          <TimePicker
            granularity="hour"
            hourCycle={12}
            defaultValue="09:00"
            aria-labelledby="digest-time-title"
            aria-describedby="digest-time-description"
          >
            <TimePickerTrigger size="sm" className="w-32" />
            {/* The trigger sits at the row's end, so `align="end"` keeps the
                popover under the row instead of hanging past its edge. */}
            <TimePickerContent align="end" />
          </TimePicker>
        </ItemActions>
      </Item>
    </div>
  )
}
```