Day Agenda

Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.

Today · Thu 23 Apr
09:30
Design reviewFigma
11:00
1:1 with MiraMeet
14:30
Ship roomOffice · 4F

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

Import & use
import { Calendar10 } from "@/components/beste/piece/calendar10";

<Calendar10
  heading="Today · Thu 23 Apr"
  items={[
    {
      "time": "09:30",
      "title": "Design review",
      "location": "Figma",
      "accent": "sky"
    },
    {
      "time": "11:00",
      "title": "1:1 with Mira",
      "location": "Meet",
      "accent": "emerald"
    },
    {
      "time": "14:30",
      "title": "Ship room",
      "location": "Office · 4F",
      "accent": "violet"
    }
  ]}
/>