Upcoming reminders panel with a tone-colored dot per item and a mono due time on the right.
New here? Read the installation guide.
import { Calendar20 } from "@/components/beste/piece/calendar20";
<Calendar20
heading="Upcoming reminders"
reminders={[
{
"title": "Pay estimated tax",
"when": "Thu, Apr 24 · 17:00",
"tone": "rose"
},
{
"title": "Annual review prep",
"when": "Fri, Apr 25 · 09:00",
"tone": "sky"
},
{
"title": "Call parents",
"when": "Sat, Apr 26 · 11:00",
"tone": "emerald"
},
{
"title": "Yoga class",
"when": "Sun, Apr 27 · 08:00",
"tone": "amber"
}
]}
/>Stacked block of scheduled slots with tone-colored left rails and a from-to mono time column.
Month grid where each day prints colored dots beneath the number to hint at event categories on it.
Compact month summary pill with today tile on the left, a dotted event indicator, and a plus button.
Two-column grid of preset meeting templates, each showing the label and its intended time slot.