Hero Split Showcase
motionA split hero with headline and copy on the left and a product card on the right whose bar chart grows into place on load. Suits launch and docs homes.
npx shadcn@latest add @minidev/hero-split-showcaseCode Hero sections for React and Tailwind CSS
14 free hero section blocks for React and Tailwind CSS v4: split layouts, kinetic type, aurora and gradient mesh backgrounds, product mockups and waitlist heroes. Copy the code, MIT.
14 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
A hero is the first screen of a landing page: headline, one supporting sentence, a primary action and proof that the product is real. These blocks cover the layouts that keep showing up in good SaaS sites, from a plain editorial split to heroes with animated type, live product mockups and glowing backgrounds.
Every block is one file that lands in your project through the shadcn CLI. They share MiniDev's semantic tokens, so a hero, a pricing section and a footer from this kit match without any tuning, and the dark theme comes for free.
Hero Editorial Split
motionA two column editorial hero in Tailwind with a masked two line headline and lede on the left and an animated device frame stack on the right.
npx shadcn@latest add @minidev/hero-editorial-splitCode Hero Kinetic Type
motionA kinetic type hero where each headline line slides up from a mask with staggered timing and the last line is accented. Pass your own lines and copy.
npx shadcn@latest add @minidev/hero-kinetic-typeCode Hero Aurora
motionA React hero with slow drifting aurora gradient blobs behind an eyebrow, headline, description and two action buttons that fade up in sequence.
npx shadcn@latest add @minidev/hero-auroraCode Hero Gradient Mesh
motionA dark hero on a layered radial gradient mesh with a scale in headline, supporting copy and high contrast launch and docs buttons for launch pages.
npx shadcn@latest add @minidev/hero-gradient-meshCode Hero Bento
motionA Tailwind hero section with a large headline above a bento grid of product tiles for AI, billing, auth and admin that fade up with a stagger on load.
npx shadcn@latest add @minidev/hero-bentoCode Hero Typed Headline
motionA centered hero whose headline cycles through rotating words such as dashboards and AI apps with a slide transition. Rotation pauses for reduced motion.
npx shadcn@latest add @minidev/hero-typed-headlineCode Hero Poster Type
motionA poster scale typography hero in React whose three headline lines rise from masks in turn, with an eyebrow, supporting copy and a magnetic CTA.
npx shadcn@latest add @minidev/hero-poster-typeCode Hero Marquee Brands
motionA hero headline above an endlessly scrolling marquee of brand names for social proof. The loop stops when reduced motion is requested by the user.
npx shadcn@latest add @minidev/hero-marquee-brandsCode Hero Client Pitch
motionA React pitch hero where headline words slide up from masks in sequence, followed by a lede, showcase and gallery buttons, and a row of proof stats.
npx shadcn@latest add @minidev/hero-client-pitchCode Hero Spotlight
blockA launch hero with a pulsing eyebrow, blur-in headline with a cursor lit second line, two actions, a proof line and a product visual that tilts into place.
npx shadcn@latest add @minidev/hero-spotlightCode Waitlist Hero
motionA React waitlist hero with a pulsing background glow, an email input, a request access button with an onSubmit callback, and an avatar stack of signups.
npx shadcn@latest add @minidev/waitlist-heroCode Waveform Hero
motionA hero with an audio waveform of hairline bars that pulse in a staggered loop, a headline, copy and a magnetic CTA. Bars hold still for reduced motion.
npx shadcn@latest add @minidev/waveform-heroCode Frequently asked questions
How do I use one of these hero sections in Next.js?
Run the install command shown on the block page, for example npx shadcn@latest add @minidev/hero-split-showcase. The file lands in components/ui, you import it in app/page.tsx and replace the sample copy with yours.
Do the animated heroes hurt page speed?
The motion heroes use CSS and the motion library, pause when they leave the viewport and go still with prefers-reduced-motion. Keep one animated hero per page and lazy load heavy sections below it.
Can I change the colors?
Yes. Every block reads semantic tokens such as --accent and --surface from your CSS, so changing the theme in globals.css restyles all of them. The shadcn theme generator in Tools builds a palette for you.