Search

Search components and blocks

Sign in

Hero Blocks

Landing-page openers that introduce the product and drive the first click.

Hero Handoff

ProOpen page

A full-height, centered hero over a soft emerald glow with a responsive navbar — hover-sliding link highlight on desktop, an animated hamburger menu on mobile. The headline, copy and CTA (BlurHoverButton) each blur into focus as they rise in with a staggered spring. Sample copy is for Clipwise, a fictional Mac clipboard-history app — swap in your own.

pnpm dlx shadcn@latest add @ditherui/hero-handoff

Your clipboard,with a memory.

Clipwise keeps everything you copysearchable from your menu bar. Press ⌘⇧Vto paste anything from the last 90 days.

Free 14-day trial · Requires macOS 13 or later

Props

className / ...section propsReact.ComponentProps<"section">—

Hero Floating Icons

ProOpen page

A frameless centered hero with a responsive navbar (sliding link highlight on wide layouts, a floating animated menu on narrow ones) over a faded dot grid, with real brand logos (from the simple-icons package) floating around the edges. Every logo sits in an identical square tile with a double border and a dark gradient face; near-black logos render in white so they stay visible. Tiles pop in with a spring, then bob and tilt on their own loops, and grow on hover. The badge, headline, copy and CTA blur and rise in with a stagger. Small screens keep only the four corner logos so the copy stays clear. Sample copy is for Orbit, a fictional integrations workspace.

pnpm dlx shadcn@latest add @ditherui/hero-floating-icons
200+ integrations

Every tool you use,one workspace.

Orbit connects your inbox, calendar, docs and code so nothing falls between tabs.

No credit card · Set up in two minutes

Props

className / ...section propsReact.ComponentProps<"section">—

Hero Dither

Open page

A centered hero with an interactive dither backdrop: soft violet blobs of fine dots sit on the side edges and ripple on their own, and a spotlight glides under the pointer, drags a fading tail behind it, and fades out when it leaves. The headline, copy and buttons blur into focus with a stagger. Sample copy is for Muse, a fictional reasoning AI — swap in your own.

pnpm dlx shadcn@latest add @ditherui/hero-dither

An AI that thinks before it speaks

Muse reasons through your question out loud, so you see every step take shape — then hands you an answer you can trust.

Install

$ pnpm dlx shadcn@latest add @ditherui/hero-dither

Props

className / ...section propsReact.ComponentProps<"section">—

Hero Sunrise

ProOpen page

A centered hero set straight on a painted sunrise (src/assets/lake-sunrise.png), with no card between the words and the picture. The painting drifts in a slow zoom and leans toward the pointer, the sun glows on a gentle pulse, the accent word is set in italic serif with a hand-drawn underline that draws itself in. Dark ink tokens and a light wash keep the copy readable on the painting in light and dark themes, and the layout scales down to phone width. Everything blurs into focus with a stagger, under the shared hero navbar. Sample copy is for Stillwater, a fictional mindful-mornings app — swap in your own, and the image for yours.

pnpm dlx shadcn@latest add @ditherui/hero-sunrise
Now with sunrise soundscapes

Wake up to a calmer day.

Stillwater turns the first ten minutes of your morning into a quiet ritual: breathe, write one line, set one intention, then begin.

AC
MR
PN
NW
+1
Joined by 12,000 early risers

Props

className / ...section propsReact.ComponentProps<"section">—

Suggested components