Time Slot List

Stacked block of scheduled slots with tone-colored left rails and a from-to mono time column.

Thursday · 23 Apr

09:0010:00

Focus block · Design review

10:3011:00

1:1 with Mira

13:0014:30

Sprint planning

16:0016:30

Coffee with Jules

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

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"
    }
  ]}
/>