Flexible project management that adapts to your workflow. Kanban boards, timelines, and more to keep your team aligned.
Design system updates
API documentation
User authentication flow
Homepage redesign
12 tasks
Completed this week
Split-layout hero with interactive kanban board mockup showing tasks with priorities, tags, assignees, and floating completion stats. Perfect for project management tools.
Split hero built around a kanban board mockup: columns of task cards show priority pills, due dates, tags, and stacked assignee avatars, with a single floating stat card animating in the corner. displayPosition flips which side holds the board versus the copy.
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/hero76?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero76?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero76.tsx and the shadcn/ui badge, button, and card components it depends on.
The installed file exports hero76Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero76, hero76Demo } from "@/components/beste/block/hero76";
export default function Page() {
return <Hero76 {...hero76Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Circle, Clock, CheckCircle2 } from "lucide-react";
import { Hero76 } from "@/components/beste/block/hero76";
export default function Page() {
return (
<Hero76
badge={{ label: "Project Management", variant: "outline" }}
heading="Organize work, your way"
description="Kanban boards and timelines that adapt to how your team already works."
buttons={[{ label: "Start Free", href: "/signup" }]}
columns={[
{
title: "To Do",
icon: Circle,
color: "text-muted-foreground",
tasks: [{ title: "Design system updates", priority: "high", dueDate: "Jan 15" }],
},
{
title: "In Progress",
icon: Clock,
color: "text-blue-500",
tasks: [{ title: "Auth flow", priority: "high", tags: ["Backend"] }],
},
{
title: "Done",
icon: CheckCircle2,
color: "text-emerald-500",
tasks: [{ title: "Homepage redesign" }],
},
]}
floatingStats={{ icon: CheckCircle2, label: "Completed this week", value: "12 tasks" }}
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 |
columns | ColumnItem[] | [] | Kanban columns (e.g. To Do, In Progress, Done) rendered inside the board mockup |
floatingStats | FloatingStats | – | Single floating stat card pinned to the board's bottom-right corner |
displayPosition | "left" | "right" | "left" | Which side the board 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 TaskAssignee = { name: string; avatar?: string };
type TaskItem = {
title: string;
priority?: "low" | "medium" | "high";
dueDate?: string;
assignees?: TaskAssignee[];
tags?: string[];
};
type ColumnItem = {
title: string;
icon: LucideIcon;
color?: string;
tasks: TaskItem[];
};
type FloatingStats = {
icon: LucideIcon;
label: string;
value: string;
};column.color is a raw Tailwind text-color class string (e.g. "text-blue-500") applied directly to the column icon; it is a free-form class, not a semantic enum like task.priority, so callers must supply a valid Tailwind class.task.priority drives a fixed color-coded pill through a hardcoded map (low emerald, medium amber, high rose); omitting priority hides the pill entirely rather than showing a neutral default.overflow-x-auto) instead of wrapping columns, so any number of columns stays on one row and scrolls on narrow viewports.floatingStats is a single object, not a list: at most one stat card floats at the board's bottom-right corner, animated with a continuous CSS float keyframe.-space-x-1.5) and fall back to the assignee's initial in a plain <span> when avatar is omitted.hero25
Split-layout hero with interactive dashboard mockup featuring stats cards, line chart, and recent activity feed. Perfect for SaaS and analytics platforms.
hero77
Split-layout hero with weekly calendar mockup showing events, attendees, and floating reminder notification. Perfect for scheduling and calendar apps.
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.