See it all in action

Live demo shop with every component working together

Overview

Getting started with E-Commerce UI components

Getting Started

Ecommerce UI is a shadcn/ui registry of production-ready ecommerce components. Install any component with one command — no npm package, no configuration. The source code lands directly in your project and you own it.

How It Works

Components are distributed as JSON files via the shadcn/ui registry protocol. When you run an install command:

  1. The CLI fetches the component JSON from registry.rifan.xyz
  2. The component source is copied into your components/ui/ecommerce/ folder
  3. Any peer dependencies are resolved automatically

You own the code — edit it however you need.

Requirements

  • React 18+
  • Tailwind CSS 4+
  • TypeScript 5+
  • shadcn/ui initialized (npx shadcn@latest init)

Recommended Starter Set

Install these first to get a working product listing with cart:

bash
# 1. Core utilities (required by all components)
npx shadcn@latest add https://registry.rifan.xyz/r/utils.json

# 2. Product display
npx shadcn@latest add https://registry.rifan.xyz/r/product-card.json
npx shadcn@latest add https://registry.rifan.xyz/r/product-grid.json

# 3. Cart
npx shadcn@latest add https://registry.rifan.xyz/r/cart-drawer.json
npx shadcn@latest add https://registry.rifan.xyz/r/use-cart.json

All Components

bash
# Product display
npx shadcn@latest add https://registry.rifan.xyz/r/product-card.json
npx shadcn@latest add https://registry.rifan.xyz/r/product-grid.json
npx shadcn@latest add https://registry.rifan.xyz/r/product-image.json
npx shadcn@latest add https://registry.rifan.xyz/r/product-price.json
npx shadcn@latest add https://registry.rifan.xyz/r/rating.json
npx shadcn@latest add https://registry.rifan.xyz/r/badge.json

# Cart
npx shadcn@latest add https://registry.rifan.xyz/r/cart-drawer.json
npx shadcn@latest add https://registry.rifan.xyz/r/cart-item.json
npx shadcn@latest add https://registry.rifan.xyz/r/cart-summary.json
npx shadcn@latest add https://registry.rifan.xyz/r/add-to-cart-button.json
npx shadcn@latest add https://registry.rifan.xyz/r/quantity-selector.json

# Discovery
npx shadcn@latest add https://registry.rifan.xyz/r/search-bar.json
npx shadcn@latest add https://registry.rifan.xyz/r/filter-sidebar.json
npx shadcn@latest add https://registry.rifan.xyz/r/sort-select.json
npx shadcn@latest add https://registry.rifan.xyz/r/breadcrumb.json

# Hooks & utils
npx shadcn@latest add https://registry.rifan.xyz/r/use-cart.json
npx shadcn@latest add https://registry.rifan.xyz/r/use-products.json
npx shadcn@latest add https://registry.rifan.xyz/r/utils.json