8bit Hero2 Split

Heroes

About

A split-layout retro hero with text on the left and a visual slot on the right. Pixel-perfect 8-bit style landing page.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8bit Hero2 Split to your project and fits it to your theme.

Code

How 8bit Hero2 Split is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Hero2 from "@/components/ui/8bit-hero2";

export default function Demo() {
  return (
    <div className="flex items-center justify-center min-h-screen w-full bg-background retro">
      <Hero2
        title="SHIP FASTER"
        subtitle="Retro components for the modern web"
        description="Drop-in 8-bit styled components that work with your existing stack. No config, no headaches."
        badges={[
          { label: "Open Source" },
          { label: "React", variant: "secondary" },
        ]}
        actions={[
          { label: "BUILD", variant: "default" },
          { label: "DOCS", variant: "outline" },
        ]}
      />
    </div>
  );
}