Dashboard Preview Hero

Hero25: Dashboard Preview Hero

Split-layout SaaS hero where the right column is a simulated product screenshot rather than an image: a browser-chrome mock (traffic-light dots, a tab bar, a settings icon) wraps a live stats grid, a real Recharts line chart, and a recent-activity row, with a small floating stat chip bobbing beside the card.

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

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

Base UI flavor

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

This installs the block to components/beste/block/hero25.tsx, the Badge, Button, Card, and Chart (shadcn ChartContainer/ChartTooltip) primitives it uses, and recharts as an npm dependency.

Quick start

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

import { Hero25, hero25Demo } from "@/components/beste/block/hero25";

export default function Page() {
  return <Hero25 {...hero25Demo} />;
}

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

import { BarChart3, Users } from "lucide-react";
import { Hero25 } from "@/components/beste/block/hero25";

export default function Page() {
  return (
    <Hero25
      heading="Manage your workflow intelligently"
      description="Visualize your data, sync with your team, and accelerate your work."
      buttons={[{ label: "Get Started Now", href: "/signup" }]}
      stats={[
        { icon: BarChart3, label: "Total Sales", value: "$124,500", change: "+12.5% from last month", variant: "primary" },
        { icon: Users, label: "Active Users", value: "1,204", change: "+4.2% increase" },
      ]}
      chart={{
        title: "Weekly Performance",
        data: [
          { label: "Mon", value: 186 },
          { label: "Tue", value: 305 },
          { label: "Wed", value: 237 },
        ],
      }}
    />
  );
}

Props

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

type BrowserTab = { label: string; active?: boolean };

type StatCard = {
  icon: LucideIcon;
  label: string;
  value: string;
  change: string;
  variant?: "primary" | "default";
};

type ChartDataPoint = { label: string; value: number };

type RecentActivity = {
  type: "sale" | "signup" | "upgrade";
  message: string;
  time: string;
};

type FloatingCard = { icon: LucideIcon; label: string; value: string };

Behavior notes

• The right column is not an image: it is a live Card styled to look like a browser window (three colored dots, a tab row where the active tab gets a bg-primary/10 chip, a settings icon), containing a real stats grid, a Recharts LineChart wrapped in the shadcn ChartContainer/ChartTooltip, and an activity row, all driven entirely by props.
• A StatCard with variant: "primary" renders with tinted border-primary/20 bg-primary/5 styling and shows its full change string in primary-tinted text; other stat cards split change on the first space so the leading token (e.g. "+12.5%") renders as a small muted chip and the rest as trailing text.
• recentActivity.type swaps the leading icon: "sale" uses DollarSign, "signup" uses UserPlus, "upgrade" uses ArrowUpCircle.
• floatingCard, when present, is positioned with a fixed offset (-right-6 top-44) relative to the dashboard card and bobs continuously via an inline @keyframes float block (defined with <style jsx>), animating translateY by 8px over a 3s loop; this is the only animation in the component.
• displayPosition: "right" flips the two-column grid using a CSS child-combinator class (lg:[&>*:first-child]:order-2) applied to the grid container rather than an order class on each column individually.
• The stats grid is hardcoded to grid-cols-2, so passing more than two stats entries will wrap to additional rows rather than reflow into more columns.