Pastel Hero Header

Heroes

About

Pastel Hero Header

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

Code

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

Usage.tsx

import { HeroHeader } from "@/components/ui/pastel-hero-header";

const DemoOne = () => {
  return (
     <HeroHeader 
        logoImage="https://cdn.21st.dev/assets/mirror/d9/d99da80c31e1702ab0a7594391c2c54c21e0f566ef94c68920ddf87ff8a34a49.png"
        logoText="Your App Name"
        heading="Your Custom Heading"
        tagline="Your custom tagline for desktop view."
        taglineShort="Short tagline for mobile."
        buttonTitle="Custom Button"
        buttonUrl="https://your-redirect-url.com"
        mainImage="https://cdn.21st.dev/assets/mirror/2e/2ed46a1260c3677c40650b87f6a5edd6a154a7e3e8adffcc9c97d98016c2b250.jpg"
        topRightImage="https://cdn.21st.dev/assets/mirror/ba/bab7b03f7e8aa7df7403d252d5c163acd3771389ca2d25f72aae5a1b53b18f4a.jpg"
        bottomLeftImage="https://cdn.21st.dev/assets/mirror/25/25782d13cc23f9f04c6b65319216598a524a70265b5292475e4c1c2fddc2c259.jpg"
        bottomRightImage="https://cdn.21st.dev/assets/mirror/68/68f813c614c76dce7d79b52b0f946e936aff54c02057e91b34652940ded5148e.png"
      />
  );
};

export { DemoOne };