Email App Hero with Inbox Mockup

Hero43: Email App Hero with Inbox Mockup

Split hero with a text column beside a working email client mockup: browser-style traffic-light header, a collapsible sidebar of folders, and a scrollable message list with avatars, unread state, and starred messages. A notification card floats over the mockup with a continuous up-down bob.

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/hero43?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero43.tsx and its shadcn/ui dependencies: Badge, Button, Card.

Quick start

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

import { Hero43, hero43Demo } from "@/components/beste/block/hero43";

export default function Page() {
  return <Hero43 {...hero43Demo} />;
}

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

import { Bell, Inbox, Star } from "lucide-react";
import { Hero43 } from "@/components/beste/block/hero43";

export default function Page() {
  return (
    <Hero43
      badge={{ label: "New Features", variant: "outline" }}
      heading="Your inbox, reimagined"
      description="AI-powered sorting and instant search for modern teams."
      buttons={[{ label: "Start Free Trial", href: "https://beste.co" }]}
      sidebar={[
        { icon: Inbox, label: "Inbox", count: 12, active: true },
        { icon: Star, label: "Starred", count: 3 },
      ]}
      emails={[
        {
          sender: { name: "Sarah Chen" },
          subject: "Q4 Marketing Strategy",
          preview: "Hi team, I've attached the updated plan for...",
          time: "2m ago",
          unread: true,
        },
      ]}
      floatingNotification={{ icon: Bell, title: "New message", message: "You have 3 unread emails" }}
      displayPosition="left"
    />
  );
}

Props

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

type SidebarItem = {
  icon: LucideIcon;
  label: string;
  count?: number;
  active?: boolean;
};

type EmailItem = {
  sender: { name: string; avatar?: string };
  subject: string;
  preview: string;
  time: string;
  unread?: boolean;
  starred?: boolean;
};

type FloatingNotification = {
  icon: LucideIcon;
  title: string;
  message: string;
};

Behavior notes

• displayPosition only reorders the grid's first child (the text column): "right" moves it after the mockup via lg:[&>*:first-child]:order-2, leaving the mockup on the left; "left" (default) keeps natural source order.
• The sidebar rail is hidden below the sm breakpoint (hidden sm:block); on small screens the mockup shows only the message list.
• Unread emails get a bg-primary/5 row tint and a bolder sender name and subject; starred emails show a filled yellow star next to the timestamp. A sender without an avatar falls back to a circular initial (first letter of name).
• The floating notification bobs continuously via a CSS @keyframes float block declared with Next.js styled-jsx (<style jsx>) inside the component, animating translateY between 0 and -8px over a 3-second loop, rather than a Tailwind utility or Framer Motion.
• The mockup itself is a Card with backdrop-blur-xl and a translucent bg-background/90, so page background shows faintly through it.