Mobile Filter Modal React component
A phone-first filter sheet: a floating Filter & sort button with an active-count badge opens a bottom sheet you can drag down to close, with sort radios and collapsible category, price, colour, rating and in-stock sections that summarise their choice, plus a sticky footer with Clear and a live Show N results button.
About the Mobile Filter Modal component
Mobile Filter Modal is the filter pattern shoppers expect on a phone: a floating Filter & sort button that opens a bottom sheet with everything in one place. Sections fold away and show what's chosen in a short line, so the sheet stays short even with many filters.
Changes are a draft until the shopper taps Show N results, and the button keeps counting matches as they go, so they never apply a filter that leaves nothing. The sheet can be dragged down to dismiss, like the native sheets people already know.
When to use it
Use it for product listings on phones, typically below your md breakpoint, alongside a sidebar or a horizontal filter bar on larger screens.
Keep the sections to what people actually filter by; five or six is plenty for a sheet.
Installation
Add the Mobile Filter Modal component to your project with the shadcn CLI. It lands in components/mobile-filter-modal.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/mobile-filter-modalOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Mobile Filter Modal with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Mobile Filter Modal FAQ
- When are filters applied?
- Only when Show results is tapped. Until then the sheet edits a copy, so closing it (drag, Escape, the close button or tapping the scrim) leaves the grid as it was. onApply receives the filters that were applied.
- How does drag to close work?
- The sheet follows the finger downward only. Releasing after more than 120 px, or flicking down quickly, closes it; otherwise it springs back. Scrolling inside the sheet doesn't start a drag, and drag is turned off for people who prefer reduced motion.
- Why does it sit in a phone-sized frame on desktop?
- So the preview shows it the way it's meant to be used. In your app, render it only on small screens and remove the frame classes if you want it edge to edge.
- What does the result count include?
- Show N results counts the products matching every choice in the draft. Category chips also show how many products each category would leave on its own.
- Is it accessible?
- The trigger announces a dialog, the sheet is a modal dialog with a title that traps focus and gives it back on close, sections are disclosure buttons, sort and rating are radio groups, chips and swatches use aria-pressed, the stock switch is a labelled switch and the result count is announced.
