Availability pickerPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/availability-picker

• Markdown: https://ui.xzero.co.uk/components/blocks/availability-picker/markdown

• Access: Xzero Pro

• Registry id: availability-picker

• Source file: registry/blocks/availability-picker/availability-picker.tsx

• Built from: Avatar, Button, Calendar, Motion

• Keywords: react availability picker, meeting time picker, group scheduling, calendly style picker, time slot picker, book a meeting ui

Use this to let people choose a time that fits a group. Connect confirmation to your scheduling service.

When to use

• Picking a meeting time that works for several attendees.
• Booking flows that show a few days and open slots with a confirmation step.

When not to use

• Use calendar or date-picker to pick a single date.
• Use time-picker for a free time input.
• Use event-invite to show and respond to an invite.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/availability-picker

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { AvailabilityPicker } from "@/components/xzero/blocks/availability-picker/availability-picker";

export function Schedule() {
  return (
    <AvailabilityPicker
      onConfirm={({ date, time }) => bookMeeting({ date, time })}
    />
  );
}

API reference

AvailabilityPicker

A day strip and time slot list for a group meeting, with attendee avatars and a confirmation step. Days, slots, and attendees are sample data.

Prop	Type	Default	Description
onConfirm	(selection: { date: string; time: string }) => void	–	Called with the chosen day label and time when confirmed.

Accessibility

• Days and times are labeled groups of buttons with aria-pressed.
• The selected day and the final selection are aria-live regions.

Motion

• Time slots slide in from the direction of the day change.
• The selected slot highlight moves with a shared layoutId on a responsive spring.
• Reduced motion removes the horizontal offset and uses zero durations.

Responsive behavior

• The five days sit in a fixed five-column grid and time slots in two columns at every width.
• Below 700px attendee names hide; below 490px day cards shrink and the heading icon and date header hide.

Performance

• Slot lists swap with AnimatePresence on day change; there are no timers or observers.
• Load availability before render, since the block does no fetching.

Notes for AI

• Use for picking a meeting time across several people.
• Replace the days, slots, and attendees with availability from your calendar service; times are labeled Zürich time.
• onConfirm receives display strings, so map them back to real timestamps.

Related

• Calendar: Browse dates in a clear, compact month view.
• Time picker: Choose a time with sensible keyboard behavior.
• Date picker: Choose a date without losing context.
• Booking pill: One pill that reshapes through party size, date, time, and a ticket.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt