Find Time
Prov1.0.0Pick a meeting time across time zones, with conflicts named and best times one click away.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { FindTime, type FindTimeDay, type FindTimePerson, type FindTimeSlot } from "@/components/ui/notchset/blocks/find-time";
export function Schedule({ days, people }: { days: FindTimeDay[]; people: FindTimePerson[] }) {
return (
<FindTime
title="Planner v15 review"
zone="ZÜRICH"
days={days}
people={people}
onConfirm={(slot: FindTimeSlot) => fetch("/api/invites", { method: "POST", body: JSON.stringify(slot) })}
/>
);
}Props
people–{ initials, name, city, offset, hours, busy, me? }[]Hours and busy blocks are in the block's zone; offset (hours) gives each person's local time; busy has one list per day.
days–{ weekday, date, month }[]The days to pick from, in the order busy lists them.
zone / title / eyebrow–stringThe zone every time is shown in, and the header.
lengths / from / to–number[] / numberMeeting lengths in minutes (30, 45, 60) and the hours on the lanes (8 to 19).
onConfirm–(slot) => PromiseSend the invites; a rejection shows COULD NOT SEND and lets them try again.
Anatomy
- Conflicts never block sending; the key turns signal and says how many.
- The first free slot is picked when the day or length changes.
- Every time is in the zone you pass; each person row also shows their own local time.
FindTimedata-slot="find-time"Length, days, lanes, best times and the confirm row.
Source
components/ui/notchset/blocks/find-time.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/find-timeNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Scheduling a meeting for a few people in different time zones
- Showing why a proposed time does not work
Use something else when
- Booking against a public calendar: use a booking page
- More than about six people: the lanes get too many to read
Mistakes to avoid
- Convert every person's calendar to the block's zone before passing it
- Check the slot again on the server before sending invites
Agents find it by
- find a time, meeting scheduler, time zones, availability, free busy, schedule meeting, calendar overlap, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/find-time.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Change the length or day; on the lanes, move 30 minutes
- Home / End
- Jump to the first or last start on the lanes
- Enter
- Pick a best time, confirm
Accessibility
- Length and day are radio groups; each day is named with how many times work for everyone
- The lanes are a slider whose value text gives the time and who is busy or outside hours
- The summary line is a polite live region: free, the first conflict with its reason, or who was invited
Motion
- Pick
- The frame and conflict outlines glide to the new start (300ms)
- Day counts
- Each count rolls, 60ms apart
- Best times
- Chips rise in (320ms)
- Confirm
- A scanner while sending, then the invited names
Responsive
- Under 640px (container width) the lanes keep 600px and scroll sideways; day buttons drop the word TIMES under 520px.
Performance
- Free slots are worked out per render from a few dozen half hours; nothing runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
