React hero sections
Free animated hero sections for React and Tailwind CSS: aurora, globe, product screenshot and split layouts. Copy the code or install with the shadcn CLI.
Aurora hero
Centered hero with a drifting aurora, dotted backdrop, announcement pill and staggered copy.
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/hero-aurora.jsonInstalls to components/blocks/hero-aurora.tsx with Animated Gradient Text, Aurora Background, Blur Fade, Grid & Dot Pattern and Shimmer Button.
Globe split hero
Split hero with copy, CTAs and live stats beside an interactive dotted globe with arcs.
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/hero-globe.jsonInstalls to components/blocks/hero-globe.tsx with Blur Fade, Globe and Number Ticker.
Product screenshot hero
Centered headline above a dashboard in a browser frame with a border beam and a logo row.
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/hero-screenshot.jsonInstalls to components/blocks/hero-screenshot.tsx with Blur Fade, Border Beam, Browser Mockup and Logo Cloud.
Phone split hero
App launch hero with an email capture on the left and an app screen in an iPhone frame.
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/hero-split-phone.jsonInstalls to components/blocks/hero-split-phone.tsx with Blur Fade, iPhone Mockup and Ripple.
Wavy hero
Bold centered hero over flowing waves, with a rotating headline word and avatar social proof.
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/hero-waves.jsonInstalls to components/blocks/hero-waves.tsx with Avatar Circles, Blur Fade, Flip Words, Shimmer Button and Wavy Background.
Developer tool hero
Minimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/hero-grid-minimal.jsonInstalls to components/blocks/hero-grid-minimal.tsx with Blur Fade, Retro Grid, Terminal and Typewriter.