Calendar Schedule Hero shadcn/tailwind block

About this block

Calendar Schedule HeroPRO

Split-layout hero with weekly calendar mockup showing events, attendees, and floating reminder notification. Perfect for scheduling and calendar apps.

Hero77: Calendar Schedule Hero

Split hero built around a weekly calendar mockup: each day is a column of event cards showing time, duration, location, and attendee avatars, colored by event type, with a floating reminder card animating beside it.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash

npx shadcn add "https://ui.beste.co/r/hero77?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

npx shadcn add "https://ui.beste.co/r-base/hero77?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero77.tsx and the shadcn/ui badge, button, and card components it depends on.

Quick start

The installed file exports hero77Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

tsx

import { Hero77, hero77Demo } from "@/components/beste/block/hero77";

export default function Page() {
  return <Hero77 {...hero77Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx

import { Video } from "lucide-react";
import { Hero77 } from "@/components/beste/block/hero77";

export default function Page() {
  return (
    <Hero77
      badge={{ label: "Smart Scheduling", variant: "outline" }}
      heading="Time management, simplified"
      description="AI-powered scheduling that finds the perfect time for everyone."
      buttons={[{ label: "Get Started", href: "/signup" }]}
      currentMonth="January 2025"
      schedule={[
        { day: "Mon", date: 13, events: [{ title: "Team Standup", time: "9:00 AM", duration: "30m" }] },
        { day: "Tue", date: 14, isToday: true, events: [{ title: "Product Review", time: "10:00 AM", type: "meeting" }] },
      ]}
      upcomingReminder={{ icon: Video, title: "Product Review starting", time: "in 5 minutes" }}
      displayPosition="left"
    />
  );
}

Props

Prop	Type	Default	Description
`badge`	`{ label: string; variant?: "default" \| "secondary" \| "outline" }`	–	Badge above the heading
`heading`	`string`	–	Main headline (required prop, no default)
`description`	`string`	–	Supporting paragraph
`buttons`	`HeroButton[]`	`[]`	CTA buttons below the description
`currentMonth`	`string`	–	Label shown next to the mock prev/next-month controls
`schedule`	`DaySchedule[]`	`[]`	Days rendered as columns inside the calendar mockup
`upcomingReminder`	`UpcomingReminder`	–	Single floating reminder card pinned beside the mockup
`displayPosition`	`"left" \| "right"`	`"left"`	Which side the calendar mockup renders on at the `lg` breakpoint
`className`	`string`	–	Extra classes for the outer `<section>`

type HeroButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "secondary" | "ghost" | "link";
};

type EventAttendee = { name: string; avatar?: string };

type EventItem = {
  title: string;
  time: string;
  duration?: string;
  type?: "meeting" | "focus" | "event";
  location?: string;
  attendees?: EventAttendee[];
  isNow?: boolean;
};

type DaySchedule = {
  day: string;
  date: number;
  isToday?: boolean;
  events: EventItem[];
};

type UpcomingReminder = {
  icon: LucideIcon;
  title: string;
  time: string;
};

Behavior notes

event.isNow is accepted by the type and set in the demo data, but nothing in the render output reads it; only day.isToday currently affects styling (it tints the day column with bg-primary/5 and fills the date badge). Treat isNow as reserved rather than functional today.
Each day column renders events in array order with no time-based sorting or overlap detection; ordering within a day is entirely the caller's responsibility.
event.type selects a soft background tint from a fixed map (meeting blue, focus violet, event emerald) and falls back to the meeting tint when omitted (eventTypeStyles[event.type ?? "meeting"]).
Attendee avatars are capped visually at 3 per event with a +N overflow counter computed from attendees.length - 3.
upcomingReminder is a single floating card, not a list, and animates with the same CSS float keyframe used across this hero mockup family.

More Hero blocks

View all Hero

PRO

hero25

Dashboard Preview Hero

PRO

hero76

Kanban Board Hero

PRO

hero43

Calendar Schedule Hero

Time management, simplified