Sunrise Sunset

Sun-schedule card with sunrise and sunset mono times flanking a large daylight duration in the center.

Thursday, Apr 23

Sunrise06:18

Daylight13h 34m

Sunset19:52

+2 min vs yesterday

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

Import & use

import { Calendar30 } from "@/components/beste/piece/calendar30";

<Calendar30
  date="Thursday, Apr 23"
  sunrise="06:18"
  sunset="19:52"
  daylightHours="13h 34m"
  trend="+2 min vs yesterday"
  tone="neutral"
/>