Product grids and product lists
Products in grids, lists, rows and editorial layouts, with filters, quick view and categories.
Switch category
Marketing
- Hero17
- Features15
- Logo clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to action11
- FAQ7
- Newsletter12
- Banners9
- Popups and consent7
- Services7
- Use cases6
- Security and trust7
- Changelog and roadmap6
- Launch and waitlist6
- Product tour6
- Press and awards10
- AI features6
- App download5
- Donations and support4
- Problem and solution5
- Objections5
- Calculators10
- Quiz and product finder5
- Free trial5
- Referral and partners10
- Community5
- Open source5
- Manifesto5
- Offer5
- Lead magnet4
- Scroll stories20
- Scroll journeys13
- Scroll effects13
- Scroll reveals and transitions15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error pages5
- Careers7
- Case studies6
- Portfolio6
- Events and webinars6
- Help center6
- Legal pages5
- Documentation4
- Search results5
- Resources and downloads4
- Podcast4
- Editorial15
- Authors and interviews10
- Glossary5
- Recipes5
- Data stories10
- Long reads5
- Surveys and feedback14
- Form states12
- Request forms16
- Applications and sign-ups13
- Address, payment and consent12
App
- Authentication9
- Dashboards6
- Tables6
- Settings5
- AI and chat16
- Calendar5
- Inbox and messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing and usage10
- Developer settings15
- Security and access10
- Import, export and history15
- Automation and builders14
- AI answers18
- AI writing and creation13
- AI setup14
- AI assistants9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms and stays5
- Classes and schedules6
- Medical practice5
- Law firm5
- Salon and spa5
- Automotive5
- Travel5
- Sports club5
- Coworking5
- Museum5
- Cinema5
- School5
- Trades5
- Insurance5
- Banking5
- Personal brand15
- Speakers and media kits10
- Creators15
- Coaching and consulting10
- Artists and musicians15
- Dental practice5
- Veterinary practice5
- Therapy practice5
- Weddings and events5
- Architecture studio5
- Tax advisor5
- Estate agent5
- Florist5
- Winery5
- Daycare5
- Driving school5
- Care services5
- Festival5
Elements
- Buttons20
- Forms and inputs22
- Pickers and selections21
- Special input fields20
- Cards10
- Overlays21
- Navigation elements15
- Menu bars and switchers14
- Data display15
- Progress and states13
- Lists, trees and timelines17
- Charts22
- Comparison charts22
- Statistical charts20
- KPI, live and map charts22
- Text effects15
- Text accents16
- Backgrounds19
- Beams, particles and motion18
- Media19
- Code and JSON8
- Panels and splitters4
From category page to lookbook
The product grid is the shelf of a shop. The eight layouts here take products as data with image, name, price, sale price, rating and stock, and they format every price in the language and currency of the page.
Grid is the category page, With filters adds a filter column on desktop and a sheet on phones. List shows more details per product for technical goods. Featured puts one product next to a few others, Category tiles leads from the start page into the shop. Quick view opens the essentials in a dialog, Carousel row fits a related products strip, Lookbook mixes large pictures with products for fashion and interior.
Use product photos with the same ratio and background, the grid only looks calm when they match. Show the price and the most important variant on the card, details go on the product page. Mark sold out items instead of hiding them, people still look for them.
Product grid
Details
What Product grid brings along, read from the registry and the source.
- Area
- E-Commerce
- Variants
- 8
- Version
- 1.0.1 · since 1.0.0
- File
- components/ui/product-grid.tsx
- npm packages
- None
- Languages
- English and German, 34 texts of its own
- Studio
- Adjust in code
- In collections
- Online shop
- Build with AI
- Over MCP in Claude, Cursor, Copilot and Codex
Props
The ProductGridProps interface from components/ui/product-grid.tsx, with the comments from the code.
variantoptionalProductGridVariantgridwith-filterslistfeaturedcategory-tilesquick-viewcarousel-rowlookbook
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodeproductsoptionalShopProduct[]actionoptional{ label: string; href: string }Link next to the heading, e.g. "Shop all"
categoriesoptionalProductCategory[]category-tiles
filtersoptionalFilterGroup[]with-filters
featuredoptionalShopProductfeatured: the product in the big card, defaults to the first product
featuredLabeloptionalstringfeatured: small label on the big card
lookbookoptional{ image: React.ReactNode; spots: LookbookSpot[]; caption?: string }lookbook: the editorial image and the products placed on it
initialQuickViewoptionalstringquick-view: open this product's dialog on load (for previews)
currencyoptionalstringonAddToCartoptional(product: ShopProduct, options?: { color?: string; size?: string; quantity: number }) => void
Built-in texts
Product grid writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.
Show all 34 texts
| Key | English | German |
|---|---|---|
| add | English Add to cart | German In den Warenkorb |
| added | English Added | German Hinzugefügt |
| quickAdd | English Quick add | German Schnell hinzufügen |
| wishlist | English Save to wishlist | German Auf die Wunschliste |
| saved | English Saved to wishlist | German Auf der Wunschliste |
| quickView | English Quick view | German Schnellansicht |
| close | English Close | German Schließen |
| all | English All | German Alle |
| filters | English Filters | German Filter |
| sort | English Sort by | German Sortieren nach |
| sortFeatured | English Featured | German Empfohlen |
| sortPriceAsc | English Price, low to high | German Preis aufsteigend |
| sortPriceDesc | English Price, high to low | German Preis absteigend |
| sortRating | English Best rated | German Beste Bewertung |
| product | English product | German Produkt |
| products | English products | German Produkte |
| clearAll | English Clear all | German Alle entfernen |
| show | English Show | German Zeige |
| remove | English Remove filter | German Filter entfernen |
| noResults | English Nothing matches these filters. | German Zu diesen Filtern passt nichts. |
| resetFilters | English Reset filters | German Filter zurücksetzen |
| previous | English Previous products | German Vorherige Produkte |
| next | English Next products | German Nächste Produkte |
| shopTheLook | English Shop the look | German Den Look kaufen |
| addLook | English Add the whole look | German Ganzen Look hinzufügen |
| viewDetails | English View full details | German Alle Details ansehen |
| loadMore | English Load more | German Mehr laden |
| showing | English Showing | German Zeige |
| of | English of | German von |
| soldOut | English Sold out | German Ausverkauft |
| size | English Size | German Größe |
| shop | English Shop | German Ansehen |
| more | English more | German weitere |
| carousel | English Products, scroll sideways | German Produkte, seitlich scrollen |
Accessibility
Read from the source of the component.
- Product grid handles the keys Arrow left, Arrow right and Space itself.
- Built on the native dialog element. The browser keeps focus inside and closes it with Escape.
- Sets aria-current, aria-haspopup, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
- Uses the roles tab and tablist.
- Announces changes through a live region without moving focus.
- Every field has a label, visible or for screen readers.
- Adds text for screen readers where icons and graphics stand alone.
- Shows a visible focus ring when used with the keyboard.
- The server renders the starting state in full, JavaScript only adds the interaction.
Motion
- Rises in briefly the first time it comes into view (kit-rise, useInView).
- Brings animations of its own, calmly timed and without wobble.
- With reduced motion (prefers-reduced-motion) it stays still. 16 places in the code switch motion off then.
Frequent questions
How do I install Product grid?
With aiw add @ai-website/product-grid. The command puts components/ui/product-grid.tsx into your project, the code is yours from then on. It brings along button, icon, section, reveal and product-image. It needs no further npm packages.
Which variants does Product grid have?
8 variants, Grid, With filters, List, Featured, Category tiles, Quick view, Carousel row and Lookbook. You pick one with the variant prop, for example variant="with-filters".
Can I translate the texts of Product grid?
Yes. Product grid carries 34 texts of its own in English and German, such as “Add to cart”, “Added” and “Quick add”. The language follows the KitProvider, single texts change through the labels prop.
Can an AI assistant build with Product grid?
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Product grid with aiw_components and install it with aiw_add @ai-website/product-grid. Name the variant in your prompt, for example variant="grid", and the assistant writes your content straight into the props.
Similar components, Often combined with
Similar components
More from E-Commerce, the same area of the kit.
- Orders and returnsEverything after the purchase. Order history, order details with tracking, printable invoices, returns and subscriptions.
- Account and loyaltyCustomer accounts, wishlists, gift cards and rewards.
- Delivery and storesDelivery dates, stock, pickup and store finders.
- Reviews and questionsProduct reviews, customer photos and questions with answers.
- All of E-CommerceProducts, product pages, reviews, cart, checkout, delivery and customer accounts.
Often combined with
Sections that usually sit next to Products on a page.
- Categories and collectionsThe way into a catalog as tiles, cards and link columns, and the head of a collection page with filters, sort and view.
- Product pagesGallery, options, reviews and buying.
- Cart and checkoutCart, checkout in one or more steps, express payment and the order confirmation.
- Bundles and subscriptionsBundles with set discounts and volume prices, and subscriptions with plans, a box builder and a delivery schedule to skip or pause.
Loading the source