Commercn

Overview

CommerCN is an open-source collection of shadcn/ui blocks for ecommerce websites, created by Arif Hossain. The blocks are copied into a project as source through the shadcn CLI, written in TypeScript and styled entirely with Tailwind CSS utility classes, so colors, spacing and typography can be changed to fit a brand.

The registry currently holds 17 blocks covering checkouts, carts, categories, orders, product cards, product details and reviews. The site also lists promo banners among its block types. CommerCN's own site and docs are built with Next.js 16, React 19 and Fumadocs.

Features

• Checkouts: Three checkout blocks for payment flows.
• Carts: Two cart blocks with cart interactions.
• Categories: Four category blocks for browse navigation.
• Product display: Three product card variants and a product detail block with hero and specs.
• Orders and reviews: An order tracking and history block plus three review blocks for social proof.
• Accessible and themeable: WAI-ARIA compliant blocks that work in light and dark modes.
• Typed props: Type definitions for every prop and event.

Tech stack

• Next.js 16, React 19
• TypeScript
• Tailwind CSS 4
• shadcn/ui, Lucide React, Motion
• Fumadocs (documentation)

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @commercn/component-name