shadcn.io is not affiliated with official shadcn/ui
Drawer examples · Right
Right Drawer Filter Panel for React
A right drawer of product filters: category checkboxes, a price slider and rating checkboxes, with Apply Filters and Reset.
Filters in a right drawer: Category and Rating checkboxes and a Price Range Slider, each group a FieldSet with a legend. The body scrolls between the header and the footer, so Apply Filters stays in reach on small screens.
Preview
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.
Related
- Simple Right DrawerA drawer that slides in from the right
- Right Drawer Settings PanelA right drawer of settings switches
- Left Drawer Navigation MenuA left drawer with a navigation menu of
- Table Filter Menu Context MenuA table context menu with a Filter by
- Right Drawer NotificationsA right drawer listing notifications
- Right Drawer Shopping CartA right drawer shopping cart with three