Meeting Start

Imminent meeting banner with a sky Join button and stacked attendee avatars ringed by RSVP status.

Release planning · Q3In 3 min · 30 minutes
BSKOAKJPNA
meet.beste.co/release-q3

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

Import & use
import { Calendar26 } from "@/components/beste/piece/calendar26";

<Calendar26
  title="Release planning · Q3"
  window="In 3 min · 30 minutes"
  joinLink="meet.beste.co/release-q3"
  joinLabel="Join"
  attendees={[
    {
      "initials": "BS",
      "image": "https://images.unsplash.com/photo-1625241189662-2980453ebffc?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fHw%3D"
    },
    {
      "initials": "KO",
      "image": "https://images.unsplash.com/photo-1568392021577-fad7eb6efba1?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D"
    },
    {
      "initials": "AK"
    },
    {
      "initials": "JP",
      "image": "https://images.unsplash.com/photo-1604072366595-e75dc92d6bdc?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjg2fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
    },
    {
      "initials": "NA"
    }
  ]}
  tone="sky"
/>