One of the most important sections and components of an e-commerce website is listing the products on the homepage or category page of a certain type of product. Within these cards you show images, names of the product, the price, reviews, buttons to add to the cart and more.
Web development has grown a lot in the past years and e-commerce is an area that is crucial to know and understand as a developer since more and more people resort to purchasing online compared to traditional methods in shopping malls and stores.
These components are all built only with the classes from Tailwind CSS and they leverage the design system and JS interactivity from the Flowbite framework and UI library.
Without further ado, let's check these components!
Default list of product cards
Use this example to show a list of product cards that feature a title, image, promotion badge, add to favorites and cart buttons, price, and list of reviews.
This example is free and open-source.
Product cards with carousel
Use this example to show two product cards inside of a carousel component that features product images, description, reviews, pricing, color and quantity selection and add to cart buttons.
Product cards with sidebar filters
This example can be used to show a sidebar with filters next to the product cards that feature size and color selection, images, prices, add to cart buttons, and more.
Product cards with grid view
Use this example to show product cards within a grid layout and use filter options inside of a drawer component where you can search based on price, rating, color, size, and more.
Advanced product cards with filters
Use this example to show an advanced settings bar with filter and sorting options and then a list of product cards with images inside a carousel, product title, pricing, CTA buttons, and more.
Credits
These components could not have been built without the usage of the following awesome open-source frameworks, UI libraries, and resources:
Top comments (1)
Well-designed components. Great work