Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Client Meetings Calendar Block for Radix UI

Four client meetings as disclosure rows with the contact as a description list and a prep checklist whose due times are worked out from the meeting, an overdue marker and a Ready count.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Get ready for client meetings with this client meetings calendar for React with Radix UI. A hairline frame with a plus mark on each corner starts with the next meeting, worked out from a fixed 14 October 2026 ("Next: Westerly Veterinary Group, in 2 days"), and a count of prep tasks done. Each of the four meetings is a Collapsible row with a date tile, the client, the topic and time, a "Ready 1 of 3" Badge and how far away it is. Opened, it shows the client contact as a description list (name, role, email, phone and place) and a prep checklist of Checkboxes whose due times are worked out from the meeting: "Send the agenda: due Wed 14 Oct, 17:00, 2 days before". A task past its time is marked with a glyph and a heavier weight and the word overdue, never a color, and ticking it updates the count at once. The next meeting opens first, and the bands are ruled by Guides. For consultancies, agencies and any team that prepares before it meets.

FAQ

How do I use my own meetings?

Edit MEETINGS: each has a client, a topic, an ISO date, a start time, a place, a contact (contact, role, email, phone) and tasks, each with a text, a time at and before, the number of days before the meeting it is due. START_TICKS lists the tasks that are done when the page opens.

Why is today always 14 October?

Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, derived date and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.

How are the due times worked out?

A task is due on the meeting's date minus its before days, at its time. A task due the same day says "the same day". It counts as overdue when it is not ticked and its day is before the fixed "now", or it is the same day and the time has passed.

How is the next meeting chosen?

It is the first meeting whose date is today or later, and it is the one that opens first. The others stay closed until you open them, each on its own.

Why is the contact a description list?

A term and its answer (contact, email, phone, where) is exactly what a description list is for, so a screen reader announces each pair. Email and phone are read left to right even in right-to-left languages.

What stays local, and how do I wire it up?

Everything. Ticks live in state and reset on reload. To make it real, save each tick from tick to your own API, and start ticks from what it returns; the contacts and tasks would come from your CRM.