shadcn.io is not affiliated with official shadcn/ui
Filterable Bill of Materials Tech Stack Block for React Aria
A bill of materials for a build tool: a filter field and a framed, scrolling table of 24 technologies grouped by layer, each with a monospace version and what it is used for, with an empty state.
Installation
Overview
A filterable bill of materials for React with React Aria, written for Joistwork, a fictional build tool. A header with a filter field at its end sits over a framed table of 24 technologies in six layers (Core, Graph, Cache, Execution, Interface, Delivery). Each row has the technology's name, its version in monospace and what Joistwork uses it for; each layer opens with a band that counts its rows. Typing in the field keeps the rows whose name, use, version or layer contain the text, marks the matched letters, drops a layer's band when none of its rows match and says how many matched in a polite line; when nothing matches, an empty state offers a button that clears the filter. The table scrolls inside a fixed-height frame with a sticky header, so filtering never moves the page. It's built from Input Group, Button, Search Highlight Text and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For developer tools, platforms and any about page that shows what it is made of. The names are generic or standards, the versions are example data.
FAQ
How do I change the technologies?
Edit GROUPS at the top of the file: each group has a name and its items, and each item a name, a version and a use. The field's label, its placeholder and the count in the header (TOTAL) are counted from the groups, so "Filter 24 technologies" is always right. Keep a version as text: a standard's number such as "RFC 9114" works as well as "1.86".
What does the filter match, and how do I clear it?
It matches anywhere in a row's name, use, version or layer name, ignoring case, so "cache" finds the whole Cache layer and "2.0" finds every version 2.0. The matched letters are marked. The Clear button inside the field and the Escape key both empty it and keep focus in the field; when nothing matches, the button in the empty state does the same.
How is the table read by a screen reader?
It is a native table with a caption, column headers with scope="col", each technology's name as a row header, and each layer's band as a column-group header. The scrolling frame is a focusable region with a name, so a keyboard user can scroll it with the arrow keys. The count under the field is a polite status that reads "9 of 24 match" as you type.
Why does the table scroll inside a frame?
Twenty-four rows plus six bands would make the block taller than two screens, and a filter that shortened the list would pull everything below it upwards. A fixed-height frame with a sticky header keeps the block's height the same with 24 rows, with one, or with none.