Availability pickerPro
Find a meeting time across people and see the choice come together.
- Picking a meeting time that works for several attendees.
- Booking flows that show a few days and open slots with a confirmation step.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { AvailabilityPicker } from 'animui/availability-picker';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this to let people choose a time that fits a group. Connect confirmation to your scheduling service.
import { AvailabilityPicker } from "animui/availability-picker"; export function Schedule() { return ( <AvailabilityPicker onConfirm={({ date, time }) => bookMeeting({ date, time })} /> );}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.
onConfirm(selection: { date: string; time: string }) => void–Called with the chosen day label and time when confirmed.- Days and times are labeled groups of buttons with aria-pressed.
- The selected day and the final selection are aria-live regions.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.
