Product Grid
Responsive multi-column product listing grid.
This page is a scaffold for the Product Grid component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.
Planned variants & states to implement:
- 2 / 3 / 4 column responsive
- List / grid view toggle
- Infinite scroll
- Load more pagination
- Skeleton loading
Other Components in Products
Product Card
Compact product tile with image, name, price, rating, and add-to-cart.
Product List
Horizontal list view of products with image and detail columns.
Product Gallery
Main image with thumbnail strip and zoom on hover.
Product Quick View
Modal overlay showing key product info without leaving the listing page.
Product Variant Selector
Color swatch, size button, and dropdown selectors for product variants.
Product Rating
Star rating display with score, count, and distribution breakdown.
Product Review
Individual review card with rating, author, date, and verified badge.
Product Badge
Overlay label for New, Sale, Bestseller, and Out of Stock states.
Product Tabs
Tab interface for Description, Specifications, and Reviews.
Product Comparison
Side-by-side attribute matrix for comparing multiple products.
Product Bundle
Frequently bought together bundle with combined price.
Stock Indicator
In stock, low stock, and out of stock inline status display.
Price Display
Regular, sale, and subscription pricing with currency formatting.
Related Products
Algorithmically or manually curated related product carousel.
Recently Viewed Products
Browser-session persisted recently viewed product strip.