shoppablecn — Ecommerce UI Components

A set of ecommerce UI components built with shadcn/ui for React and Next.js applications.

📚 View Documentation

---

Features

• 🧩 Built on shadcn/ui primitives
• ⚡ CLI-based component integration
• 📱 Fully responsive
• ♿ Accessibility-ready
• 🎨 Easy to customize with Tailwind CSS
• 🛒 Focused on real ecommerce interactions
• 🤖 AI-ready for fast implementations

Tech Stack

• React 19
• Next.js 16
• Tailwind CSS
• shadcn/ui
• TypeScript

UI Components

• Product Card — A product-focused card component for displaying key item information such as image, title, price, and actions in a clean, conversion-oriented layout.
• Quick Options — An interactive component that surfaces selectable product choices like size, color, or variant options in a fast and compact way.
• Hotspot — A clickable hotspot component for highlighting specific areas of an image or product visual, useful for interactive product discovery and contextual details.

Example

import { ProductCard } from "@/components/ui/product-card"
import type { Product } from "@/components/ui/types"

export function Example() {
  const product = {
    id: "product-001",
    title: "Product Name",
    category: "Category",
    images: [
      {
        src: "/products/product-image.jpg",
        alt: "Product image",
      },
    ],
    price: { amount: 10000, currency: "USD" },
  } satisfies Product

  return (
    <ProductCard
      product={product}
    />
  )
}

Installation

git clone https://github.com/vasilisgee/shoppablecn.git
cd shoppablecn
npm install
npm run dev

---

Usage

Components can be added to your project via CLI, with full examples available in the documentation.

The repository also serves as a full reference implementation and source code.

docs.shoppablecn.dev

---

License

MIT