Modern Hero

Heroes 191

About

Modern Hero

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

Code

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

Usage.tsx

import { Hero7 } from "@/components/blocks/modern-hero"

const demoData = {
  heading: "A Collection of Components Built With Shadcn & Tailwind",
  description:
    "Finely crafted components built with React, Tailwind and Shadcn UI. Developers can copy and paste these blocks directly into their project.",
  button: {
    text: "Discover all components",
    url: "https://www.shadcnblocks.com",
  },
  reviews: {
    count: 200,
    avatars: [
      {
        src: "https://cdn.21st.dev/assets/mirror/73/73c813328c18594c6611e7447cf0d3e3366abc0d3981fd35ff0410f6061e2ca3.webp",
        alt: "Avatar 1",
      },
      {
        src: "https://cdn.21st.dev/assets/mirror/89/893615e6bca2860106c155950a3db99e49127e9c19e64a9ae621828a60988739.webp",
        alt: "Avatar 2",
      },
      {
        src: "https://cdn.21st.dev/assets/mirror/95/95a8259ad5cc04bb0cd89b787a7de2395edf784650850bea6396e04f452dcb4b.webp",
        alt: "Avatar 3",
      },
      {
        src: "https://cdn.21st.dev/assets/mirror/5c/5c94210b75776a33f741eba0075a15921bde963af8161bba1470e9ebaed6137a.webp",
        alt: "Avatar 4",
      },
      {
        src: "https://cdn.21st.dev/assets/mirror/22/22ad291a3c4e3d708152bcaad90817523647a966daa76b18f017f66e58ca8cc4.webp",
        alt: "Avatar 5",
      },
    ],
  },
};

function Hero7Demo() {
  return <Hero7 {...demoData} />;
}

export { Hero7Demo };