Hero

Heroes 1

About

Full-screen slider showcasing species with immersive photography and minimal typography. Ideal for conservation websites, awareness campaigns, or storytelling experiences.

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

import { HeroSlider, type HeroSlide, type NavigationItem } from "@/components/ui/hero";

const WildlifeSliderDemo = () => {
  const wildlifeSlides: HeroSlide[] = [
    {
      title: "Amur Leopard",
      subtitle: "Species",
      status: "Critically Endangered",
      image: "https://cdn.21st.dev/assets/mirror/b7/b72e50fe5c298943bd15e50c2632858a51e6a61d5d7bd00692021313e2992464.jpg"
    },
    {
      title: "Asiatic Lion",
      subtitle: "Species",
      status: "Endangered",
      image: "https://cdn.21st.dev/assets/mirror/1f/1fbfc83ba26f68d7eda60c598607bcc3474390e5070c4bef04c0e4bc46e56346.jpg"
    },
    {
      title: "Siberian Tiger",
      subtitle: "Species",
      status: "Endangered",
      image: "https://cdn.21st.dev/assets/mirror/98/9824d82607cb1ee5ebe66aa15dbc3f2437510ef324fd9c40a5557baad5cb7bc5.jpg"
    },
    {
      title: "Brown Bear",
      subtitle: "Species",
      status: "Least Concern",
      image: "https://cdn.21st.dev/assets/mirror/3e/3e0313580a111d171fa09273b1c7a4ebac5672da34444709e13a12eefce665cf.jpg"
    }
  ];

  const navigation: NavigationItem[] = [
    { label: "Species", href: "#", active: true },
    { label: "About Us", href: "#" },
    { label: "Our Work", href: "#" },
    { label: "Get Involved", href: "#" }
  ];

  return (
    <HeroSlider
      slides={wildlifeSlides}
      logo="W"
      navigation={navigation}
      ctaLink={{ label: "Donate", href: "#" }}
      showCounter={true}
      showPagination={true}
      autoPlay={true}
      autoPlayInterval={6000}
    />
  );
};

export default WildlifeSliderDemo;