Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Right Drawer Filter Panel for Svelte

A right Filters drawer with category checkboxes, a price slider from $0 to $1000, ratings, Apply, and Reset.

UI library: Ark UI

A right panel titled Filters. Category and Rating are checkbox groups, and a price slider sits between $0 and $1000. Apply Filters and Reset sit under the groups.

Use it for product filters on a phone. On a wide page, a Popover beside the list is lighter. In Svelte, Ark UI does not apply the filters.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="right"><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Filters</Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><DrawerHeader><DrawerTitle>Filters</DrawerTitle><DrawerDescription>Refine your search with these filters</DrawerDescription></DrawerHeader><div class="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-4"><FieldSet><FieldLegend variant="label">Category</FieldLegend><FieldGroup class="gap-3">{#each CATEGORIES as category (category.id)}<Field orientation="horizontal"><Checkbox name={category.id} /><FieldLabel class="font-normal">{category.label}</FieldLabel></Field>{/each}</FieldGroup></FieldSet><FieldSet><FieldLegend variant="label">Price Range</FieldLegend><Slider aria-label={PRICE_LABEL} data-no-drag defaultValue={[50]} max={100} step={1} /><div class="flex justify-between text-muted-foreground text-xs"><span>$0</span><span>$1000</span></div></FieldSet><FieldSet><FieldLegend variant="label">Rating</FieldLegend><FieldGroup class="gap-3">{#each RATINGS as rating (rating.id)}<Field orientation="horizontal"><Checkbox name={rating.id} /><FieldLabel class="font-normal">{rating.label}</FieldLabel></Field>{/each}</FieldGroup></FieldSet></div><DrawerFooter><Button>Apply Filters</Button><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Reset</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>

FAQ

How are the filters grouped?

In three FieldSets, Category, Price Range and Rating, each with a FieldLegend. Category and Rating are rows of checkboxes with their label after them.

What does the price slider control?

One thumb from 0 to 100, starting at 50, with $0 and $1000 as captions under it. Map the 0 to 100 value to your price range, or set the range to real prices. max sets the top of the range.

Does dragging the slider drag the drawer?

No. An attribute on the Slider tells the drawer to ignore drags that start there, so moving the thumb doesn't swipe the drawer closed. data-no-drag is that attribute.

Do Apply Filters and Reset change anything?

Not yet. Apply Filters has no handler, and Reset is a DrawerClose, so it closes the drawer without clearing the boxes. Make the filters controlled, apply them on Apply, and clear them on Reset.

Which part scrolls?

The body between the header and the footer: min-h-0 flex-1 overflow-y-auto lets it take the free height and scroll.

How does Filters open the drawer?

An outline button opens the drawer. Its text, Filters, is the accessible name. asChild on DrawerTrigger receives props: spread them onto the button.

API Reference

Drawer

Sets swipeDirection="right" and showBar={false}. The rest is on the Drawer page.

Button

Sets props and variant="outline". The rest is on the Button page.

Field

Sets variant="label" and orientation="horizontal". The rest is on the Field page.

Checkbox

Sets name={category.id} and name={rating.id}. The rest is on the Checkbox page.

Slider

Sets aria-label={PRICE_LABEL}, data-no-drag, defaultValue={[50]}, max={100} and step={1}. The rest is on the Slider page.

All 22 drawer examples