Components

Ready-made Vue components for building commerce storefronts.

UI Components

Commerce.js provides 33 Vue components designed for commerce storefronts. Every component follows Nuxt UI conventions: typed props, named slots, theme overrides via ui prop, and global theming through app.config.ts.

Categories

Product

Product cards, pricing, gallery, options, and grid layout.

Cart

Cart drawer, items, summary, and quantity selector.

Checkout

Address form and checkout stepper.

Order

Order cards and status timeline.

Review

Review cards and star ratings.

Promotion

Coupon inputs and promo banners.

Navigation

Search bar with live suggestions.

Common

Empty states and product type badges.

Marketing

Hero banners for landing pages.

Category

Faceted filtering sidebar.

Wishlist

Wishlist grid with actions.

Subscription

Subscription pricing cards.

Auction

Auction cards and bid panels.

Rental

Rental cards and booking forms.

Gift Card

Gift card purchase and balance.

Wholesale

Price tiers and RFQ forms.

Event

Event/ticket product cards.

Installation

pnpm add @commercejs/ui

Register the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@commercejs/ui'],
})

Conventions

Theming

Override styles per-instance with the ui prop, or globally via app.config.ts:

// app.config.ts
export default defineAppConfig({
  ui: {
    productCard: {
      slots: {
        root: 'rounded-2xl shadow-xl',
        title: 'text-lg font-bold',
      },
    },
  },
})

→ See the @commercejs/ui package page for full documentation.