Centered Category Grid Hero Block for React

Edit CATEGORIES at the top of the file. Each category has a title, a short description, a count shown as written (2,400+), an href and a Lucide icon. Eight fill two rows of four; four or twelve also make full rows, and an odd count leaves a gap on the last row on a phone. Keep the descriptions to a few words so the cells stay the same height.

Yes. Each one is our Item rendered as a link, so it opens with a click, Enter or a middle click, shows the item's focus ring and gets a subtle background on hover, with its icon darkening as the pointer comes over it. Point each href at the category's page. On Base UI the item takes render={<a href="/templates/developer-tools" />}.

With Guides, the component that draws the page rails. Each cell is relative with extend="sm" and a start mark, and the cells sit 1rem apart, exactly twice the overshoot, so neighbouring lines meet without crossing. The cell itself has no border: the item's own border is transparent, so the lines are the only edge.

The grid is a list named Template categories, so a screen reader announces eight items before reading them. Each cell is one link whose name is its whole text, such as Developer tools, APIs, CLIs and SDKs, 2,400+ templates. The icons and the lines are hidden from assistive technology, and the headline is the page's one h1: the category names are not headings, so the page outline doesn't jump levels.

The cells sit two to a row below the md breakpoint and four to a row above it. A long name or description wraps instead of being cut off, and the cells in a row keep the same height. The headline wraps, balanced, and the two actions wrap onto two lines when they don't fit side by side, with the first action on the first screen.

Use the category grid when your library falls into a handful of clear groups and visitors may not know yet what they want: browsing by industry gets them started in one click. Use a search bar hero when the collection is large and most visitors arrive knowing what they're looking for.