Stacked block of scheduled slots with tone-colored left rails and a from-to mono time column.
New here? Read the installation guide.
import { Calendar15 } from "@/components/beste/piece/calendar15";
<Calendar15
heading="Thursday · 23 Apr"
slots={[
{
"from": "09:00",
"to": "10:00",
"label": "Focus block · Design review",
"tone": "sky"
},
{
"from": "10:30",
"to": "11:00",
"label": "1:1 with Mira",
"tone": "emerald"
},
{
"from": "13:00",
"to": "14:30",
"label": "Sprint planning",
"tone": "violet"
},
{
"from": "16:00",
"to": "16:30",
"label": "Coffee with Jules",
"tone": "amber"
}
]}
/>Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.
Upcoming reminders panel with a tone-colored dot per item and a mono due time on the right.
Time-blocked day plan with a start-time gutter and color-coded focus, meeting, break, and admin blocks.
Two-column grid of preset meeting templates, each showing the label and its intended time slot.