shadcn.io is not affiliated with official shadcn/ui
Centered Tech Icon Row Hero Block for Solid
A showcase centered hero for an integrations story, with a headline, a sentence, a Shine Button and six tool tiles below on shared hairlines, each with what the product does with the tool.
Installation
Overview
A showcase centered hero that shows the stack your product works with, for Solid with Ark UI. A headline and a sentence lead to a Shine Button and an outline one between solid page rails, then six tool tiles fill one full-width band on shared hairlines with + marks on its corners: a glyph in a soft square, the tool's name, and a few words on what the product does with it. A line below links to the rest of the catalog. It's built from Shine Button, Button and Guides, with Lucide glyphs standing in for the tools' logos and Tailwind CSS, and the copy is for Tributary, a fictional data-pipeline product. The hero fades in, then the tiles one after another, all with CSS, and nothing moves for visitors who ask for reduced motion. For developer platforms, API services, CLI tools and any product whose ecosystem is a reason to choose it.
FAQ
How do I put the tools' real logos in the tiles?
Each entry in TOOLS has a Lucide glyph standing in for the logo, the tool's name and a note, what the product does with it. Replace tool.icon with the tool's mark as an inline SVG that fills with currentColor, so it takes the tile's text-muted-foreground and follows the theme in light and dark; keep it about size-6. An img works too: give it an empty alt, since the name under it already says which tool it is. Check each project's brand guidelines before you show its logo.
How do I show more or fewer tools?
Add or remove entries in TOOLS. The tiles are a grid of two columns on a phone and three from md, so six tools make two even rows. Keep the count a multiple of the columns, so no cell is left empty, and keep the line under the band honest as the list grows.
Can each tile link to its integration page?
Yes. Put the tile's glyph and name inside an a in each list item, and give the link a visible focus style such as outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50. The link's name is then the tool's name, which says where it goes. Leave the tiles as plain text, as here, when you have no page to send them to.
Is this tech stack hero accessible?
Yes. The page has one h1. A visually hidden "Works with" h2 names the band, and the tools under it are a list, so a screen reader announces six items and reads each by its name and note; the glyphs are hidden from assistive technology. Both calls to action are links named by their text.
How does the tool row adapt to small screens?
Below the md breakpoint the headline wraps, balanced, at text-4xl, the calls to action sit side by side while they fit, and the six tiles form three rows of two. From md up they make two rows of three.
When should I use a tool row instead of a logo cloud?
Use this row to say what your product connects to: a handful of named technologies, each given the same weight, with the rest behind a link. Use a logo cloud or a logo marquee for social proof, to show which companies use you, where the number of names matters more than any one of them.