Search

Search components and blocks

Sign in

Hero Blocks

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

Hero Floating Icons

Pro

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">—

Suggested components