shadcn.io is not affiliated with official shadcn/ui
Filter Sidebar Gallery Block for Svelte
A sidebar of category checkboxes with counts, a two-thumb price slider and a minimum rating select beside twelve drawn lights, with a Sheet for the filters on phones.
Installation
Overview
A gallery with a filter sidebar for Svelte with Ark UI, for Wicklow Lights, a lighting shop. A start-aligned header sits over a split. The sidebar carries the divider, with a + mark where it meets the top rule, and holds category checkboxes with counts, a price range slider with two thumbs and a select for the lowest rating. The grid beside it shows twelve drawn lights on shared hairlines, each with its price and rating. Active filters repeat as removable chips with Clear all, a polite line says "Showing 6 of 12 lights", and a mix that matches nothing shows an empty state. An unseen copy of all twelve holds the block's height. On a phone the sidebar becomes a Sheet behind a "Filters (2)" button and the pictures are two across. It's built from Checkbox, Slider, Select, Sheet, Button, Empty and Guides. The shop, its lights, prices and ratings are made up for the example.
FAQ
How do the three filters combine?
Categories are a union (tick two and you see both kinds), and the price range and the lowest rating then narrow what those kinds show. Each category's count is how many lights it would show under the price and rating now chosen, so it changes as you move the slider. Active filters repeat as chips; removing one moves focus to the status line.
What happens on a phone?
The sidebar is hidden and a "Filters (2)" button, with the number of active filters, opens a Sheet from the bottom with the same three controls, the same state and a "Show 6 lights" button that closes it. Closing it returns focus to the button. The Sheet and the sidebar are two copies of one component, so the ids are scoped.
How is the price slider named and announced?
Its two thumbs read as the lowest and the highest price with their values ("Lowest price: $60"). The visible count updates as you drag, but the polite status line speaks only when you let go, so a screen reader isn't flooded.
Why doesn't the page jump when the pictures change?
An unseen copy of all twelve pictures (hidden from assistive technology and from the keyboard) sits in the same grid cell as the live set, so the block is always as tall as the full gallery and the shown pictures stay at the top. Nothing below the block moves.
Why is the rating a number and a star icon, not the Rating component?
The rating is read-only and part of a caption, so a drawn star next to its number (with "out of 5" for screen readers) is enough, and avoids a read-only Rating's extra tab stop.
How do I use my own photographs?
Each picture is typed data with a description (its alt text), a scene and a ratio. Add your image's address to it, then replace the Scene in its tile with <img alt="" className="size-full object-cover" src={…} />: the caption already names the picture, and the role="img" wrapper's label can move to the alt. The comment above Scene says where. Tiles crop to a fixed shape, so keep object-cover.