Skip to content

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

Free

Right Drawer Filter Panel for React

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, Base 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 render={<Button variant="outline" />}>Filters</DrawerTrigger>
  <DrawerContent>
    <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 id={`filters-${category.id}`} name={category.id} />
              <FieldLabel
                className="font-normal"
                htmlFor={`filters-${category.id}`}
              >
                {category.label}
              </FieldLabel>
            </Field>
          ))}
        </FieldGroup>
      </FieldSet>
      <FieldSet>
        <FieldLegend variant="label">Price Range</FieldLegend>
        <Slider
          aria-label="Price range"
          data-base-ui-swipe-ignore
{/* 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-base-ui-swipe-ignore 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. The Button goes in the render prop of DrawerTrigger.

API Reference

Drawer

Sets swipeDirection="right". The rest is on the Drawer page.

Button

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

Field

Sets variant="label", orientation="horizontal", htmlFor, filters-, category and id. The rest is on the Field page.

Checkbox

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

Slider

Sets aria-label="Price range", data-base-ui-swipe-ignore, defaultValue={[50]}, max={100} and step={1}. The rest is on the Slider page.

All 22 drawer examples