Example Studio
Cargando documentación…
Tote diario
Example Studio
Remera esencial
Desde$ 24.90020% OFF
Example Studio
Cargando documentación…
NotHeadless UI
Una card compuesta con cambio de imagen al hacer hover, badges de oferta y sin stock, y link en toda la card. ProductGrid arma una grilla responsive e incluye un skeleton.
Ejemplo interactivo con datos de muestra. Sin conexión a una tienda real.
Cargando ejemplo…
<ProductGrid products={products} />
// o componé las partes
<ProductCard product={p}>
<ProductCard.Image />
<ProductCard.Title className="text-base" />
<ProductCard.Price />
<ProductCard.Stock />
</ProductCard>
<Suspense fallback={<ProductGridSkeleton count={8} />}>…</Suspense>| Prop | Tipo | Descripción |
|---|---|---|
| product | Pick<Product, id | name | handle | images | variants> & { brand? } | Cualquier selección que incluya estos campos. |
| children | ReactNode | Layout propio con ProductCard.Image / Badges / Brand / Title / Price / Stock. |
| renderCard (Grid) | (p, i) => ReactNode | Render propio de cada card en ProductGrid. |
Example Studio
Example Studio
Example Studio