81 Pro components and page blocks

Get Pro
uibrik

Meeting Planner

Pro

Preview

Customize

Length60min
Hour width52px
15

Installation

Pro

Meeting Planner is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/meeting-planner

Usage

import { MeetingPlanner } from "@/components/uibrik/meeting-planner/meeting-planner";​<MeetingPlanner  defaultDuration={60}  hourWidth={52}  snap="15"  suggestions  defaultDate="2026-10-27"  onChange={(meeting) => {}}  // attendees={[{}]}  // defaultZone="…"  // defaultStart={0}/>

Props

MeetingPlanner
defaultDuration
Type number
60
Meeting length on mount.
hourWidth
Type number
52
Width of one hour on the timeline.
snap
Type "5" | "10" | "15" | "30"
"15"
Minutes the window snaps to while dragged.
suggestions
Type boolean
true
Best times for everyone, ranked.
attendees
Type { id, name, timeZone, city?, avatar?, optional?, hours?: [start, end], busy?: [start, end][] }[]
SAMPLE_ATTENDEES
People and their days, in their own local hours. Optional people don't count against a slot.
defaultDate
Type string
"2026-10-27"
Day to plan, YYYY-MM-DD. Offsets (and daylight saving) are worked out for this date.
defaultZone
Type string
–
IANA zone the hours line up against. Defaults to London if an attendee is there, else the first attendee's.
defaultStart
Type number
840
Start on mount, minutes after midnight in the reference zone.
onChange
Type (meeting: { start: string; end: string; zone: string }) => void
–
Called when the meeting moves or changes length, with UTC ISO times.
className
Type string
–
Classes for the outer shell. It fills its parent's height.