IDE Mockup Split Hero

Hero104: IDE Mockup Split Hero

Developer-product hero with a tagline, heading, description, CTA buttons, and a trust line on the left, and a static code-editor mockup on the right built from two independent panels: a file tree and a line-numbered code viewer.

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

Base UI flavor

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

This installs the block to components/beste/block/hero104.tsx and its dependency: the button shadcn/ui primitive.

Quick start

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

import { Hero104, hero104Demo } from "@/components/beste/block/hero104";

export default function Page() {
  return <Hero104 {...hero104Demo} />;
}

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

import { FileCode, Folder } from "lucide-react";
import { Hero104 } from "@/components/beste/block/hero104";

export default function Page() {
  return (
    <Hero104
      tagline="Open source. Type-safe. Developer-first."
      heading="The full-stack framework that respects your time"
      description="Auth, database, payments, and email out of the box, all fully typed."
      buttons={[
        { label: "Start building", href: "/docs", variant: "default", icon: "arrow" },
        { label: "View on GitHub", href: "/github", variant: "outline", icon: "external" },
      ]}
      trustText="POWERING 3200+ PROJECTS IN PRODUCTION."
      fileTree={[
        { name: "src", isFolder: true, isOpen: true },
        { name: "components", icon: FileCode, indent: 1 },
        { name: "server", isFolder: true },
      ]}
      codeLines={[
        { number: 1, content: "import { db } from \"@/server/db\";" },
        { number: 2, content: "" },
        { number: 3, content: "export const list = protectedProcedure.query(...);" },
      ]}
    />
  );
}

Props

type HeroButton = {
  label: string;
  href: string;
  variant?: "default" | "outline";
  icon?: "arrow" | "external";
};

type FileTreeItem = {
  name: string;
  icon?: LucideIcon;
  indent?: number;
  isFolder?: boolean;
  isOpen?: boolean;
};

type CodeLine = { number: number; content: string };

Behavior notes

• This is the only hero in the hero99-108 set that is not min-h-screen: it uses ordinary section padding (py-24 md:py-32 lg:py-40) and has no backgroundMedia prop at all, so there is no video/image treatment here.
• The mockup is entirely static markup, no syntax highlighting, no typing animation, no scroll. fileTree rows without isFolder render a fixed Folder-style icon slot even when no icon is passed (item.icon ?? Folder); folder rows show a chevron that flips based on isOpen but is not interactive.
• fileTree indentation is computed inline via paddingLeft: indent * 16 + 8, not Tailwind indent classes, so arbitrary nesting depths are supported.
• The file-tree column is hidden below md (hidden w-48 shrink-0 md:block); only the code panel remains visible on small screens.
• codeLines and fileTree are independent: the mockup renders as long as either one has entries, so a code-only or tree-only IDE mockup is possible by omitting the other.
• Button icons are driven by the icon field ("arrow" renders ArrowRight, "external" renders ExternalLink) rather than accepting an arbitrary icon component.