Ecommerce Product Page UI

A modern, responsive, and customizable ecommerce product page component built with React and Tailwind CSS.

Features

• 🖼️ Product Gallery: Responsive image gallery with thumbnail navigation.
• ⭐ Rating System: interactive rating stars display.
• 🎨 Color & Size Selection: Built-in state management for product options.
• 📱 Responsive Design: Optimized for mobile, tablet, and desktop.
• ⚡ Tailwind CSS: Easy to customize styles.

Installation

\\ash npm install ecommerce-product-page-ui

or

yarn add ecommerce-product-page-ui

or

pnpm add ecommerce-product-page-ui \\

Usage

1. Configure Tailwind CSS

Add the package to your \ ailwind.config.js\ \content\ array so Tailwind can generate the styles:

\\js // tailwind.config.js module.exports = { content: [ "./src//*.{js,jsx,ts,tsx}", "./node_modules/ecommerce-product-page-ui/dist//*.{js,mjs}" // Add this line ], theme: { extend: {}, }, plugins: [], }

OR

// globals.css @source "../node_modules/ecommerce-product-page-ui/dist"; @import "tailwindcss";

\\

2. Using images.pexel.com Image

\
// next.config.ts (or next.config.js) const nextConfig = { images: { domains: ["images.pexels.com"], }, };

export default nextConfig;

///

3. Import and Use

\\ sx import { ClothingPage } from 'ecommerce-product-page-ui';

function App() { return (

export default App; \\

Customization

Currently, the product data is bundled with the component. Future versions will support passing product data as props.