Hero

Heroes

About

A ticket-stub styled landing hero with a highlighted word, primary/secondary call-to-action buttons, and an optional scrolling marquee strip.

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

Code

How Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Hero } from "@/components/ui/hero";

export default function HeroDemo() {
  return (
    <Hero
      title="Print the night with bigbullui"
      highlight="bigbullui"
      description="A ticket-stub styled hero for launches, drops, and limited releases."
      primaryAction={{ label: "Get tickets", href: "#" }}
      secondaryAction={{ label: "View lineup", href: "#" }}
      marqueeItems={["Limited run", "All ages", "Doors at 8pm", "No refunds"]}
    />
  );
}