shadcn.io is not affiliated with official shadcn/ui
Borderless Compact Icon Grid Features Block for Radix UI
A searchable directory of nine capabilities: a search field with a live count marks matches in a borderless 3 by 3 icon grid and quiets the rest, with an empty state when nothing matches.
Installation
Overview
A capability directory for React with Radix UI. A centred header sits above a search band ruled top and bottom by the page's lines, with + marks where the rules meet the rails. Typing in the field marks the match in each capability's name and sentence, keeps the matching cells at full strength and quiets the others, and the end of the field shows a live count like "7 of 9". Below the band, nine capabilities sit in a borderless grid, each an icon tile, a name and a sentence: three across from md, two across on a phone. A search that finds nothing shows an empty state in the grid's own space. It's built from Input Group, Search Highlight Text, Empty and Button, with your theme's tokens for every colour. For internal-tools directories, plugin lists and settings pages with a lot of options.
FAQ
How do I add a capability?
Add an entry to CAPABILITIES at the top of the file: a name, a sentence and a Lucide icon. The grid, the count and the search all read the same list, so nothing else changes. Keep the number a multiple of three on desktop so the last row is full.
How does the search match?
A capability matches when its name or its sentence contains what you typed, ignoring case and accents, so "resume" finds "Résumé". It is a plain text search, never a regular expression. The marks use the same comparison, so what is marked is exactly what matched.
How are the other cells quieted without failing contrast?
They are never faded. A matching cell has a stronger icon tile and a title in the full text colour; the rest keep their muted text colour, which is still readable, and lose the tile's fill. With a blank field every cell is at full strength.
What happens when nothing matches?
The grid stays in its space but is hidden, and the empty state takes its place in the same cell, so the page doesn't jump. It repeats what you typed and has a Clear search button that empties the field and puts the cursor back in it. The count shows "0 of 9", and it is a polite live region, so it is announced as you type.