Bottom sheet filters
A panel that slides up from the bottom with a grab handle, collapsible sections and an Apply button with a count.
Settings
Code
<div class="uv-fmh"><div class="ph"><button class="op"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg> Filters</button><div class="ov"></div><div class="sh"><span class="gr"></span><div class="ac open"><button class="hd">Category<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="bd"><button class="op2">Design</button><button class="op2">Code</button><button class="op2">Photos</button></div></div><div class="ac"><button class="hd">Price<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="bd"><button class="op2">Low</button><button class="op2">Medium</button><button class="op2">High</button></div></div><button class="ap">Apply <b class="n">0</b></button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
On a phone, a bottom sheet is the friendliest place for a full set of filters. Think of a second-hand marketplace where people narrow things down by category, price and condition. The sections fold away so the sheet never gets too tall, and the Apply button shows how many options are picked. Also found as a mobile filter drawer.
Let people close the sheet by tapping the dimmed background, as the demo does. Keep the Apply button always visible at the bottom. If you only have two or three filters, simple chips above the list do the job with fewer taps.