shadcn.io is not affiliated with official shadcn/ui
Borderless Compact Icon Grid Features Block for React
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 Base 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.
Related
- Pro
Integration Logo Mark Grid Features
App screensA tabbed integration directory for an integration hub: twelve tiles with abstract monograms, each with a connect switch, three category tabs and a live count of what is connected.
- Pro
Glossary Term Grid Features
Documents and objectsA glossary: an A to Z rail of anchor links where only letters with a term are active, and eight terms in two columns of shared hairlines, each with its part of speech, a definition and a See also link.
- Pro
Rounded Tile Card Grid Features
Card gridsSix rounded feature tiles for a team workspace, each led by a small greyscale interface in a muted well (a room, a gauge, sharing levels, a branch, a thread, a reminder) instead of an icon, in hairline frames with plus marks.
- Pro
Dark Inset Icon Grid Features
Card gridsA card-in-card grid of six capabilities for a team knowledge base, each with an icon tile, a sentence and a row showing which of three plans include it.
- Pro
Keyboard Focus Grid Features
Live controlsA six-cell feature grid for a keyboard-first notes app: one focus ring glides between cells with the arrow keys, and Enter or a tap writes the cell's detail into a strip under the grid.
- Pro
Toggle Grid Checkered Mode Switch Features
Proof and comparisonsA Managed or Self-hosted switch that flips six capability cells at once: each swaps its sentence and ticks, rolls its metric to the other mode's figure and shows by how much that mode leads or trails, on a checkered grid.