shadcn.io is not affiliated with official shadcn/ui
Input Filter Sidebar Block for Solid
An admin tool in a fixed-height window whose slim sidebar filters twelve pages by name as you type, marks the match in each name, hides emptied groups, counts what is left and offers Clear when nothing matches.
Installation
Overview
Find a page by typing a few letters with this input filter sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Sievewick, an admin tool, whose header carries a filter field over twelve pages in four groups. Each letter narrows the list by what the page names hold, ignoring case and accents, and marks the match in every name with Search Highlight Text. A group with no page left disappears, and a count under the field reads "5 of 12 pages". Escape empties the field and keeps focus in it. When nothing matches, an Empty says so and offers Clear filter. Folded to icons, the rail hides the field and keeps the matching pages with tooltips; on a phone the sidebar is a sheet, and the status line under the page repeats the count. The page lists the chosen page's entries. It's built from Sidebar, Sidebar Input, Empty, Button, Avatar and Guides, with a CSS entrance only. For admin tools, settings and any rail with a dozen or more pages.
FAQ
What does the filter match?
The page names, as a plain substring: "port" finds Reports, Imports and Exports. Case and accents are ignored, and the typed text is never read as a pattern, so a dot or a bracket is just itself. Group names are not searched; a group simply hides when none of its pages is left.
What do Escape and Clear filter do?
Escape empties the field when it holds text and leaves focus where it is; with the field already empty it does nothing, so it never closes anything by surprise. Clear filter in the empty state does the same and returns focus to the field. Both put all twelve pages back and the current page keeps its place.
How is the count said to a screen reader?
The line under the field is for the eyes. The polite status line says the count about half a second after you stop typing, with what was typed ("3 of 12 pages for re."), so it isn't read for every letter; pressing Enter in the field says it at once. Choosing a page says which one opened.
What happens when the sidebar folds to icons?
The field and the group labels hide, and the pages that match show as icons with tooltips. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on. A filter typed before folding stays in force.
What stays in the page, and how do I connect it?
Everything. The twelve pages and their entries are typed at the top of the file; nothing is fetched or saved. The pages are links to # whose handler shows the page instead of navigating. Replace the list with your routes and mark the current one with isActive and aria-current.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The field is inside the sheet, so choosing a page closes it, and the count stays visible in the status line under the page.