UI

A library of 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.

Installation

pnpm add @commercejs/ui

Register the module in your nuxt.config.ts:

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

Component Categories

→ See the Components section for full documentation on each component.

Conventions

Props

Every component uses TypeScript interfaces for props with withDefaults:

<CProductCard :product="product" variant="soft" size="lg" />

Slots

Named slots expose scoped data for deep customization:

<CProductCard :product="product">
  <template #price="{ price }">
    <span class="text-red-500">{{ price.formatted }}</span>
  </template>
</CProductCard>

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',
      },
    },
  },
})