@aspect/commerce

Commerce industry components for storefronts, catalogs, and admin dashboards.

Installation

pnpm add @aspect/commerce @aspect/react @aspect/css @aspect/tokens

Components

| Component | Description | | -------------- | ----------------------------------------------------------------------- | | ResourceItem | List row with media, name, meta text, and action slot | | Thumbnail | Image thumbnail with size variants (sm, md, lg) | | Pagination | Previous/next navigation with label text | | Banner | Dismissible notification bar with tone (info, success, warning, danger) |

ResourceItem

A versatile list item for product lists, order lists, or any resource collection.

import { ResourceItem, Thumbnail } from '@aspect/commerce';

<ResourceItem
  media={<Thumbnail source="/product.jpg" alt="Lamp" size="sm" />}
  name="Minimal Desk Lamp"
  meta="LAMP-001 · $89.00 · 124 in stock"
  actions={<Badge tone="success">active</Badge>}
/>;

Thumbnail

import { Thumbnail } from '@aspect/commerce';

<Thumbnail source="/product.jpg" alt="Product" size="sm" />
<Thumbnail source="/product.jpg" alt="Product" size="md" />
<Thumbnail source="/product.jpg" alt="Product" size="lg" />

Banner

import { Banner } from '@aspect/commerce';

<Banner tone="info" title="Welcome" onDismiss={() => {}}>
  Your store is live.
</Banner>;

CSS

Import the commerce CSS alongside the base system:

import '@aspect/commerce/css';