AI-powered scheduling that finds the perfect time for everyone. Sync calendars, manage availability, and never miss a meeting.
Mon
13
Team Standup
Tue
14
Product Review
Focus Time
Wed
15
Client Call
Product Review starting
in 5 minutes
Split-layout hero with weekly calendar mockup showing events, attendees, and floating reminder notification. Perfect for scheduling and calendar apps.
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.
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
npx shadcn add "https://ui.beste.co/r/hero77?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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"
/>
);
}| 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;
};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.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"]).+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.hero25
Split-layout hero with interactive dashboard mockup featuring stats cards, line chart, and recent activity feed. Perfect for SaaS and analytics platforms.
hero76
Split-layout hero with interactive kanban board mockup showing tasks with priorities, tags, assignees, and floating completion stats. Perfect for project management tools.
hero43
Split-layout hero with interactive email client mockup featuring sidebar, message list, and floating notification. Perfect for email and communication apps.
hero75
Split-layout hero with full chat interface mockup featuring channels sidebar, message threads, online users, and floating notification. Perfect for collaboration and messaging apps.