shadcn.io is not affiliated with official shadcn/ui
Centered Integration Grid Hero Block for Radix UI
A centered showcase hero for a workflow tool: an announcement link, two calls to action and the integration directory as a framed panel of twelve tiles that share their hairlines.
Installation
Overview
A centered showcase hero with an integration directory below the copy, for React with Radix UI. An announcement link sits above a medium-weight headline and a subtitle, then a ShineButton as the one primary action and an outline Button, both links. Below, the directory is drawn as a panel in a hairline frame with + marks on its corners: a "Connected apps" header with a count, then twelve tiles in cells that share their lines, each with an icon, the integration's name and the kind of tool it is, two columns on a phone, three from sm and four from lg. Solid rails and a top rule with + marks frame the block and join its neighbours on a page. Each part fades up once on load with CSS transitions, and nothing moves for visitors who ask for reduced motion. Made for iPaaS tools, CRMs, developer platforms and any SaaS product whose integrations are part of the pitch.
FAQ
How do I change the integrations in the grid?
Edit the INTEGRATIONS array at the top of the file. Each entry is a name, a category shown under it ("Payments", "CI/CD") and an icon, any Lucide icon. The names are fictional placeholders: put your real integrations in their place, the ones visitors look for first. Twelve fill three full rows of four; eight or sixteen also leave no gap at every width.
How do I show real integration logos instead of icons?
Replace the icon inside each tile's icon box with the integration's logo, an img or an inline svg at the same size-5. The name is already written under it, so give the logo an empty alt (or aria-hidden on an svg) and the tile is still announced once. Monochrome logos in currentColor keep the panel quiet and follow light and dark mode.
Can each tile link to its integration page?
Yes. The tiles are plain list items, not links, so nothing suggests a click that goes nowhere. To link them, wrap each tile's content in an a pointing at the integration's page, give the cell a hover style such as hover:bg-muted/50, and its name becomes the link's name. Keep the "Browse integrations" call to action for the full directory.
Is the integration grid accessible?
Yes. The headline is the page's one h1, and the panel's "Connected apps" heading is an h2. The tiles are a list named "Integrations", so a screen reader announces how many there are before reading each name and kind; the icons are hidden from assistive technology. The announcement pill is a link named by its text, and "200+" is isolated with bdi, so it reads the right way round in right-to-left layouts.
Where do the two calls to action go?
Both are links to #: point "Browse integrations" at your directory and "Request an integration" at a form. The first is a ShineButton, the block's one primary action; the second is an outline Button.
Each button renders its a through asChild, so the button's styles land on the link.
How does the hero fit on a phone?
Below the sm breakpoint the headline wraps, balanced, at text-4xl, and the two calls to action wrap onto centered rows, so both sit on the first screen. The tiles keep two columns down to 320px, wide enough for each name and its kind on one line; they grow to three columns at sm and four at lg. Twelve divides evenly into all three, so no cell is left empty.