Zum Inhalt springen
UI Kit
Accent

Produktgrids und Produktlisten

Produkte als Raster, Liste, Reihe und Lookbook, mit Filtern, Schnellansicht und Kategorien.

8 Variants
Kategorie wechseln

Von der Kategorieseite bis zum Lookbook

Das Produktgrid ist das Regal eines Shops. Die acht Layouts hier nehmen Produkte als Daten mit Bild, Name, Preis, Sonderpreis, Bewertung und Bestand und formatieren jeden Preis in Sprache und Währung der Seite.

Das Raster ist die Kategorieseite, „Mit Filtern“ ergänzt am Desktop eine Filterspalte und am Handy ein Sheet. Die Liste zeigt mehr Details je Produkt, für technische Waren. „Hervorgehoben“ stellt ein Produkt neben einige andere, Kategorie-Kacheln führen von der Startseite in den Shop. Die Schnellansicht öffnet das Wichtigste in einem Dialog, die Karussell-Reihe passt zu einer Reihe ähnlicher Produkte, Lookbook mischt große Bilder mit Produkten für Mode und Einrichtung.

Nutze Produktfotos mit gleichem Format und Hintergrund, nur dann wirkt das Grid ruhig. Zeig Preis und wichtigste Variante auf der Karte, Details gehören auf die Produktseite. Markiere Ausverkauftes, statt es zu verstecken, Menschen suchen danach.

Produktraster

Raster

Vier Spalten mit Kategorie-Pillen, zweitem Bild beim Überfahren und Schnellkauf.

Mit Filtern

Filterspalte mit Zählern, Chips und Sortierung. Auf dem Telefon öffnen die Filter als Sheet.

Liste

Zeilen mit Beschreibung, Bewertung, Preis und direktem Kaufknopf.

Kategorie-Kacheln

Eine große und vier kleine Kacheln, die in die Abteilungen führen.

Schnellansicht

Ein Dialog mit Galerie, Farbe, Größe und Menge, ohne das Raster zu verlassen.

Lookbook

Ein redaktionelles Bild mit nummerierten Punkten und den passenden Produkten daneben.

Details

Was Produktraster mitbringt, aus Registry und Quellcode gelesen.

Bereich
E-Commerce
Variants
8
Version
1.0.1 · seit 1.0.0
Datei
components/ui/product-grid.tsx
Bringt mit
utilskitbuttoniconsectionrevealproduct-image
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 34 eigene Texte
Studio
Im Code anpassen
In Sammlungen
Online-Shop
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle ProductGridProps aus components/ui/product-grid.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    ProductGridVariant

    gridwith-filterslistfeaturedcategory-tilesquick-viewcarousel-rowlookbook

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • productsoptional
    ShopProduct[]
  • actionoptional
    { label: string; href: string }

    Link next to the heading, e.g. "Shop all"

  • categoriesoptional
    ProductCategory[]

    category-tiles

  • filtersoptional
    FilterGroup[]

    with-filters

  • featuredoptional
    ShopProduct

    featured: the product in the big card, defaults to the first product

  • featuredLabeloptional
    string

    featured: small label on the big card

  • lookbookoptional
    { image: React.ReactNode; spots: LookbookSpot[]; caption?: string }

    lookbook: the editorial image and the products placed on it

  • initialQuickViewoptional
    string

    quick-view: open this product's dialog on load (for previews)

  • currencyoptional
    string
  • onAddToCartoptional
    (product: ShopProduct, options?: { color?: string; size?: string; quantity: number }) => void

Eingebaute Texte

Diese Texte schreibt Produktraster selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 34 Texte anzeigen
addEnglisch Add to cartDeutsch In den Warenkorb
addedEnglisch AddedDeutsch Hinzugefügt
quickAddEnglisch Quick addDeutsch Schnell hinzufügen
wishlistEnglisch Save to wishlistDeutsch Auf die Wunschliste
savedEnglisch Saved to wishlistDeutsch Auf der Wunschliste
quickViewEnglisch Quick viewDeutsch Schnellansicht
closeEnglisch CloseDeutsch Schließen
allEnglisch AllDeutsch Alle
filtersEnglisch FiltersDeutsch Filter
sortEnglisch Sort byDeutsch Sortieren nach
sortFeaturedEnglisch FeaturedDeutsch Empfohlen
sortPriceAscEnglisch Price, low to highDeutsch Preis aufsteigend
sortPriceDescEnglisch Price, high to lowDeutsch Preis absteigend
sortRatingEnglisch Best ratedDeutsch Beste Bewertung
productEnglisch productDeutsch Produkt
productsEnglisch productsDeutsch Produkte
clearAllEnglisch Clear allDeutsch Alle entfernen
showEnglisch ShowDeutsch Zeige
removeEnglisch Remove filterDeutsch Filter entfernen
noResultsEnglisch Nothing matches these filters.Deutsch Zu diesen Filtern passt nichts.
resetFiltersEnglisch Reset filtersDeutsch Filter zurücksetzen
previousEnglisch Previous productsDeutsch Vorherige Produkte
nextEnglisch Next productsDeutsch Nächste Produkte
shopTheLookEnglisch Shop the lookDeutsch Den Look kaufen
addLookEnglisch Add the whole lookDeutsch Ganzen Look hinzufügen
viewDetailsEnglisch View full detailsDeutsch Alle Details ansehen
loadMoreEnglisch Load moreDeutsch Mehr laden
showingEnglisch ShowingDeutsch Zeige
ofEnglisch ofDeutsch von
soldOutEnglisch Sold outDeutsch Ausverkauft
sizeEnglisch SizeDeutsch Größe
shopEnglisch ShopDeutsch Ansehen
moreEnglisch moreDeutsch weitere
carouselEnglisch Products, scroll sidewaysDeutsch Produkte, seitlich scrollen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Produktraster reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
  • Baut auf dem nativen dialog-Element auf. Der Browser hält den Fokus im Fenster und schließt es mit Escape.
  • Setzt aria-current, aria-haspopup, aria-label, aria-labelledby, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen tab und tablist.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 16 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Produktraster?

Mit aiw add @ai-website/product-grid. Der Befehl legt die Datei components/ui/product-grid.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, reveal und product-image. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Produktraster?

8 Varianten, Raster, Mit Filtern, Liste, Hervorgehoben, Kategorie-Kacheln, Schnellansicht, Karussell-Reihe und Lookbook. Du wählst sie mit der Prop variant, zum Beispiel variant="with-filters".

Kann ich die Texte von Produktraster übersetzen?

Ja. Produktraster bringt 34 eigene Texte auf Deutsch und Englisch mit, etwa „In den Warenkorb“, „Hinzugefügt“ und „Schnell hinzufügen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Produktraster einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Produktraster mit aiw_components und installieren sie mit aiw_add @ai-website/product-grid. Nenn im Prompt die Variante, etwa variant="grid", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus E-Commerce, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Products stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert