shadcn.io is not affiliated with official shadcn/ui
Filter Overlap Empty Results Error Block for Solid
A results panel for filters that match nothing: three toggle chips over 24 kits, a table of how many kits each pair of filters shares, the empty pair ringed, and a chip off to bring results back.
Installation
Overview
Tell people why a filtered list is empty, not only that it is, with this filter overlap panel for Solid with Ark UI. It's the catalog of Kitstall, a marketplace for interface kits: a header over one framed panel, its bands ruled by Guides. A band holds three filters as toggle chips (Price: Free, License: Commercial, Updated: Last 7 days), each a native button styled like an outline Button and solid in the foreground color while the filter is on. The results band lists the first three kits that pass every filter that is on; when none does, it tests each pair of filters against the 24 typed kits and lists how many they share, marks the pair with nothing in common and rings its two chips. Turning one of those chips off brings kits back and the count follows; turning it on again takes them away. The one Shine Button, Reset all filters, turns every chip off, and Restore turns them back on. It's built from Button, Shine Button, Empty and Guides, with a CSS entrance only. For marketplaces, catalogs and any list with more than one filter.
FAQ
How are the pairs worked out?
A small pure helper takes the filters that are on, makes every pair of them and counts the typed kits that pass both. The empty pair is the one with a count of 0. Here the free kits are all for personal use, so Free and Commercial share nothing, while Free and Last 7 days share 5 and Commercial and Last 7 days share 3. Edit KITS and the counts, the table, the ringed chips and the headline all follow.
Are the chips real controls?
Yes. Each is a native button with aria-pressed: solid with a cross while the filter is on, outlined, struck through and with a plus when it is off. Pressing one never changes the chips' places, since a turned-off chip keeps its slot, so it can be turned back on.
What stays in the page, and how do I wire it?
The catalog is typed in the file and every control changes only this page's state; the polite status line ("2 filters on, 3 kits match.") is worked out from the chips, so it is always true. In your product, run the filters on your server, and count the pairs there if the catalog is large, then send the counts with the empty result.
Does the panel change height?
No. The results band keeps an unseen copy of the full empty table (all three pairs) in the same cell as the live content, so the list of three kits, a shorter table and the full table all fit the same box.
What do Reset all filters and Restore do?
Reset turns every chip off, so all 24 kits show, newest first, three at a time. When nothing is on, the button stays visible, quiet, and says so if pressed. Restore turns the three chips back on and brings the empty state with them, so the demo can be run again.