Skip to content

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

Free

Right Drawer Filter Panel for Ark UI

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

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 React, Ark UI does not apply the filters.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<Drawer swipeDirection="right">
  <DrawerTrigger asChild>
    <Button variant="outline">Filters</Button>
  </DrawerTrigger>
  <DrawerContent showBar={false}>
    <DrawerHeader>
      <DrawerTitle>Filters</DrawerTitle>
      <DrawerDescription>
        Refine your search with these filters
      </DrawerDescription>
    </DrawerHeader>
    <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-4">
      <FieldSet>
        <FieldLegend variant="label">Category</FieldLegend>
        <FieldGroup className="gap-3">
          {CATEGORIES.map((category) => (
            <Field key={category.id} orientation="horizontal">
              <Checkbox name={category.id} />
              <FieldLabel className="font-normal">
                {category.label}
              </FieldLabel>
            </Field>
          ))}
        </FieldGroup>
      </FieldSet>
      <FieldSet>
        <FieldLegend variant="label">Price Range</FieldLegend>
        <Slider
          aria-label={PRICE_LABEL}
          data-no-drag
          defaultValue={[50]}
{/* The rest of the file is under Installation. */}

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. DrawerTrigger takes asChild and merges onto the one Button inside it.

API Reference

Drawer

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

Button

Sets 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