Reminder List

Upcoming reminders panel with a tone-colored dot per item and a mono due time on the right.

Upcoming reminders
Pay estimated taxThu, Apr 24 · 17:00
Annual review prepFri, Apr 25 · 09:00
Call parentsSat, Apr 26 · 11:00
Yoga classSun, Apr 27 · 08:00

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

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