← All blocks
Product grid with a filter and sort bar
product-grid · filter-bar-grid · product-grid-filterable
npx shadcn@latest add @plus-ui/product-grid-filterableDefault content
{
"eyebrow": "The autumn shelf",
"title": "Things for the table, the bed and the long evenings",
"description": "Thrown, turned and woven in small runs by eleven makers within a day's drive of our Sheffield shop.",
"currency": "GBP",
"products": [
{
"name": "Hollin tumbler, set of 4",
"href": "#",
"category": "Tableware",
"material": "Speckled stoneware, oat satin glaze",
"price": 48,
"images": [
{
"src": "https://images.unsplash.com/photo-1610701596007-11502861dcfa?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Speckled stoneware tumblers stacked on a white shelf"
},
{
"src": "https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Hollin tumblers on an oak table beside cream bowls and serving boards"
},
{
"src": "https://images.unsplash.com/photo-1610701596295-4dc5d6289214?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Cream tableware and a striped linen napkin laid on a table"
},
{
"src": "https://images.unsplash.com/photo-1493106641515-6b5631de4bb9?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Clay-covered hands throwing a pot on the wheel"
}
],
"swatches": [
{
"name": "Oat",
"color": "oklch(0.86 0.035 80)"
},
{
"name": "Honey",
"color": "oklch(0.72 0.11 70)"
},
{
"name": "Chalk",
"color": "oklch(0.95 0.01 90)"
}
],
"badge": "Bestseller",
"rating": {
"value": 4.9,
"count": 212
}
},
{
"name": "Edale linen cushion cover",
"href": "#",
"category": "Linen",
"material": "Stonewashed Lithuanian linen, 230 gsm",
"price": 34,
"compareAt": 42,
"images": [
{
"src": "https://images.unsplash.com/photo-1616627561950-9f746e330187?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Striped and rust linen cushions on an oak bed"
}
],
"swatches": [
{
"name": "Rust",
"color": "oklch(0.55 0.13 45)"
},
{
"name": "Flax stripe",
"color": "oklch(0.83 0.04 85)"
},
{
"name": "Sage",
"color": "oklch(0.7 0.05 140)"
}
],
"badge": "Autumn sale",
"rating": {
"value": 4.8,
"count": 119
}
},
{
"name": "Moor moon jar",
"href": "#",
"category": "Vases",
"material": "Thrown in two halves, cream dolomite glaze",
"price": 165,
"images": [
{
"src": "https://images.unsplash.com/photo-1612196808214-b8e1d6145a8c?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "A large cream moon jar on a timber plinth"
},
{
"src": "https://images.unsplash.com/photo-1493106641515-6b5631de4bb9?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "A potter's hands raising clay on the wheel"
},
{
"src": "https://images.unsplash.com/photo-1631125915902-d8abe9225ff2?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Unglazed clay vessels drying on a plaster plinth"
},
{
"src": "https://images.unsplash.com/photo-1597696929736-6d13bed8e6a8?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "A shelf of finished vases in cream and terracotta"
}
],
"swatches": [
{
"name": "Dolomite",
"color": "oklch(0.95 0.01 90)"
}
],
"badge": "Made to order",
"rating": {
"value": 5,
"count": 31
}
},
{
"name": "Coldwell oak serving board",
"href": "#",
"category": "Kitchen",
"material": "Oiled English oak, 48 × 22 cm",
"price": 58,
"images": [
{
"src": "https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Oak serving boards leaning on a wall behind cream tableware"
}
],
"swatches": [
{
"name": "Oak",
"color": "oklch(0.62 0.08 65)"
},
{
"name": "Walnut",
"color": "oklch(0.4 0.05 50)"
}
],
"rating": {
"value": 4.9,
"count": 97
}
},
{
"name": "Ember & Pine candle",
"href": "#",
"category": "Candles",
"material": "Rapeseed wax, cedar and smoked pine, 60-hour burn",
"price": 28,
"images": [
{
"src": "https://images.unsplash.com/photo-1603006905003-be475563bc59?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "A candle burning in a smoked glass on sheepskin"
}
],
"badge": "New",
"rating": {
"value": 4.9,
"count": 76
}
},
{
"name": "Tarn dinner plate",
"href": "#",
"category": "Tableware",
"material": "Porcelain-blend stoneware, lake celadon glaze",
"price": 26,
"images": [
{
"src": "https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "A stack of pale blue glazed dinner plates on a slatted tray"
}
],
"swatches": [
{
"name": "Lake",
"color": "oklch(0.78 0.05 230)"
},
{
"name": "Slate",
"color": "oklch(0.45 0.02 250)"
}
],
"rating": {
"value": 4.8,
"count": 164
}
},
{
"name": "Fell wool throw",
"href": "#",
"category": "Linen",
"material": "Undyed Bluefaced Leicester wool, 130 × 180 cm",
"price": 120,
"compareAt": 150,
"images": [
{
"src": "https://images.unsplash.com/photo-1578500494198-246f612d3b3d?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "A dark wool throw draped over a tan sofa"
}
],
"swatches": [
{
"name": "Charcoal",
"color": "oklch(0.3 0.005 60)"
},
{
"name": "Moss",
"color": "oklch(0.48 0.06 130)"
}
],
"badge": "Autumn sale",
"rating": {
"value": 4.9,
"count": 88
}
},
{
"name": "Scar bottle vase",
"href": "#",
"category": "Vases",
"material": "Grogged stoneware, unglazed ash finish",
"price": 42,
"images": [
{
"src": "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Three matte grey bottle vases holding dried seed heads"
}
],
"swatches": [
{
"name": "Ash",
"color": "oklch(0.78 0.01 90)"
},
{
"name": "Soot",
"color": "oklch(0.32 0.01 60)"
}
],
"rating": {
"value": 4.7,
"count": 58
}
},
{
"name": "Kiln everyday mug",
"href": "#",
"category": "Tableware",
"material": "Porcelain, clear gloss inside, 350 ml",
"price": 22,
"images": [
{
"src": "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "A plain white porcelain mug in soft side light"
}
],
"swatches": [
{
"name": "Chalk",
"color": "oklch(0.95 0.01 90)"
},
{
"name": "Oat",
"color": "oklch(0.86 0.035 80)"
}
],
"rating": {
"value": 4.8,
"count": 301
}
},
{
"name": "Stanage linen duvet set",
"href": "#",
"category": "Linen",
"material": "Stonewashed linen, 170 gsm, double",
"price": 185,
"images": [
{
"src": "https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Rumpled white linen bedding beside an oak side table"
}
],
"swatches": [
{
"name": "Chalk",
"color": "oklch(0.95 0.01 90)"
},
{
"name": "Flax",
"color": "oklch(0.83 0.04 85)"
},
{
"name": "Clay",
"color": "oklch(0.66 0.08 50)"
}
],
"rating": {
"value": 4.8,
"count": 143
}
},
{
"name": "Brimham vessel",
"href": "#",
"category": "Vases",
"material": "Hand-built raw clay, beeswax sealed",
"price": 72,
"images": [
{
"src": "https://images.unsplash.com/photo-1631125915902-d8abe9225ff2?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Three hand-built unglazed clay vessels on a plaster plinth"
}
],
"badge": "Limited run",
"rating": {
"value": 4.6,
"count": 22
}
},
{
"name": "Turned ash bud vases, pair",
"href": "#",
"category": "Vases",
"material": "Lathe-turned ash, food-safe oil, glass insert",
"price": 38,
"images": [
{
"src": "https://images.unsplash.com/photo-1584589167171-541ce45f1eea?auto=format&fit=crop&w=900&h=1100&q=80",
"alt": "Two turned wooden bud vases holding green leaves"
}
],
"rating": {
"value": 4.7,
"count": 49
}
}
],
"cardLabels": {
"wasPrice": "Was",
"reviews": "{count} reviews",
"colours": "{count} colours"
},
"filters": {
"label": "Filter by shelf",
"allLabel": "Everything",
"saleLabel": "Autumn sale only",
"sortLabel": "Sort by",
"sortOptions": [
{
"value": "featured",
"label": "Shop's picks"
},
{
"value": "price-asc",
"label": "Price, low to high"
},
{
"value": "price-desc",
"label": "Price, high to low"
},
{
"value": "rating",
"label": "Best reviewed"
}
],
"countLabel": "{count} pieces",
"emptyTitle": "Nothing on this shelf just now",
"emptyBody": "The sale pieces in this shelf have sold through. New firings land on the first Friday of the month.",
"resetLabel": "Show everything"
},
"story": {
"eyebrow": "From the workshop",
"title": "Every Hollin tumbler is dipped by hand, so no two rims match",
"body": "Ruth Ashworth throws them in batches of forty, then dips each one in oat glaze to the line of her thumb.",
"image": {
"src": "https://images.unsplash.com/photo-1493106641515-6b5631de4bb9?auto=format&fit=crop&w=1200&h=900&q=80",
"alt": "Clay-covered hands shaping a pot on the wheel"
},
"action": {
"label": "Meet the makers",
"href": "#",
"variant": "secondary"
}
},
"viewAll": {
"label": "Shop all home goods",
"href": "#",
"variant": "secondary"
}
}