Back to UI Components
Blocks

hero 24

A product hero with a countryside backdrop, floating pill navigation, large serif headline, dark rounded button, play control, and staggered entrance animation.

hero 24 is a real, MIT-licensed React + Tailwind block component from the open-source Watermelon UI library, in its hero set. Run the install command above with the shadcn CLI and it drops the component's actual source straight into your project.

It depends on lucide-react, motion, so make sure those are installed too.

We re-check this entry on a schedule, so the install command keeps pointing at the current registry item.

CategoryBlocks
LibraryWatermelon UI
SubcategoryHero
Dependencieslucide-react, motion
npx shadcn@latest add https://registry.watermelon.sh/r/hero-24.json

How to use it

  1. Run the install command above — the shadcn CLI drops the real component files into your project.
  2. Install the dependencies listed below it, if any.
  3. Import the component and restyle it with your own Tailwind tokens.
Compiled and written by VintuxAI from public sources.

Related in Blocks

Announcement 1A temporary banner that shares important updates with users while letting them continue their work without intAnnouncement 2A temporary notice that shares important updates with users while letting them continue what they were doing.Announcement 3A short banner that shares important updates with users while they continue working, appearing briefly within Announcement 4A small notice strip that conveys timely updates to people without pulling them away from what they are doing.Announcement 5A temporary banner that delivers important updates to users without pulling them away from what they are doingAnnouncement 6A short-lived banner that surfaces important updates to users while they continue working without interruptionAnnouncement 7A dismissible banner that shares timely updates at the top of a page without halting what the user is doing.Announcement 8A dismissible banner that surfaces time-sensitive updates at the top of a page without blocking what the user Announcement 9A short banner that shares urgent updates with users while they continue working, without blocking what they aauth 01A sign-in screen that checks user identity and controls entry to restricted parts of an app.
← Back to UI Components