Date Pill

Horizontal pill combining a relative label, weekday, mono date, and an optional time separated by thin rules.

TodayThuApr 2314:00

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

Import & use

import { Calendar4 } from "@/components/beste/piece/calendar4";

<Calendar4
  weekday="Thu"
  date="Apr 23"
  time="14:00"
  relative="Today"
/>