e-commerce product grid filter sidebar catalog product filter sidebar category price rating catalog product grid with filter sidebar filterable product catalog
Product Grid With Filter
Fetch pattern JSON:
curl https://webspire.de/patterns/product-grid/with-filter.json with-filter.html
<section
class="ws-product-grid"
style="
--ws-product-grid-bg: oklch(0.98 0.005 75);
--ws-product-grid-text: oklch(0.2 0.02 75);
--ws-product-grid-text-soft: oklch(0.45 0.015 75);
--ws-product-grid-border: oklch(0.85 0.01 75);
--ws-product-grid-accent: oklch(0.55 0.15 150);
--ws-product-grid-action-bg: oklch(0.35 0.02 75);
--ws-product-grid-action-text: oklch(0.98 0.005 75);
"
>
<div class="mx-auto max-w-7xl px-6 py-16 lg:py-24" style="background:var(--ws-product-grid-bg);color:var(--ws-product-grid-text)">
<h2 class="text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-product-grid-text)">Shop All Products</h2>
<div class="mt-10 flex flex-col gap-8 lg:flex-row">
<!-- Filter Sidebar -->
<aside class="hidden w-64 shrink-0 lg:block">
<div class="space-y-6">
<!-- Category -->
<fieldset>
<legend class="text-sm font-semibold" style="color:var(--ws-product-grid-text)">Category</legend>
<div class="mt-3 space-y-2">
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-grid-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-grid-accent)"> Electronics</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-grid-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-grid-accent)"> Accessories</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-grid-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-grid-accent)"> Clothing</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-grid-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-grid-accent)"> Home</label>
</div>
</fieldset>
<!-- Price Range -->
<fieldset>
<legend class="text-sm font-semibold" style="color:var(--ws-product-grid-text)">Price Range</legend>
<div class="mt-3 flex items-center gap-2">
<input type="number" placeholder="Min" class="w-full rounded-lg px-3 py-2 text-sm" style="border:1px solid var(--ws-product-grid-border);color:var(--ws-product-grid-text);background:var(--ws-product-grid-bg)" aria-label="Minimum price">
<span style="color:var(--ws-product-grid-text-soft)">–</span>
<input type="number" placeholder="Max" class="w-full rounded-lg px-3 py-2 text-sm" style="border:1px solid var(--ws-product-grid-border);color:var(--ws-product-grid-text);background:var(--ws-product-grid-bg)" aria-label="Maximum price">
</div>
</fieldset>
<!-- Rating -->
<fieldset>
<legend class="text-sm font-semibold" style="color:var(--ws-product-grid-text)">Rating</legend>
<div class="mt-3 space-y-2">
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-grid-text-soft)"><input type="radio" name="rating" class="rounded-full" style="accent-color:var(--ws-product-grid-accent)"> 4 stars & up</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-grid-text-soft)"><input type="radio" name="rating" class="rounded-full" style="accent-color:var(--ws-product-grid-accent)"> 3 stars & up</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-grid-text-soft)"><input type="radio" name="rating" class="rounded-full" style="accent-color:var(--ws-product-grid-accent)"> 2 stars & up</label>
</div>
</fieldset>
</div>
</aside>
<!-- Product Grid -->
<div class="flex-1">
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Wireless Headphones"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Wireless Headphones</h3>
<p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$99.00</p>
</div>
</article>
<article class="rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.65 0.12 180), oklch(0.55 0.14 230))" role="img" aria-label="Smart Watch"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Smart Watch Pro</h3>
<p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$249.00</p>
</div>
</article>
<article class="rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.72 0.08 100), oklch(0.62 0.12 150))" role="img" aria-label="Leather Backpack"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Leather Backpack</h3>
<p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$149.00</p>
</div>
</article>
<article class="rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.68 0.1 40), oklch(0.58 0.13 80))" role="img" aria-label="Running Shoes"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Running Shoes</h3>
<p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$129.00</p>
</div>
</article>
<article class="rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.7 0.06 320), oklch(0.6 0.1 350))" role="img" aria-label="Desk Lamp"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Minimalist Desk Lamp</h3>
<p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$59.00</p>
</div>
</article>
<article class="rounded-xl overflow-hidden" style="border:1px solid var(--ws-product-grid-border)">
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.7 0.1 60), oklch(0.6 0.13 100))" role="img" aria-label="Coffee Mug Set"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-product-grid-text)">Ceramic Coffee Mug Set</h3>
<p class="mt-2 text-lg font-bold" style="color:var(--ws-product-grid-text)">$34.00</p>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commerceproductgridfiltersidebarcatalog
Slots
| Name | Required | Description |
|---|---|---|
| filters | Yes | Sidebar with filter controls. |
| products | Yes | Product card grid. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| sidebarPosition | 'left' | 'right' | left | Filter sidebar placement. |
Enhanced variant with filter sidebar. Use when products need browsing refinement by category, price, or rating.