Skip to content
EvolveEvolveEvolve

commerce-ui

@evolve-storefront/commerce-ui · v1.0.0 · Storybook ↗

Presentational components for commerce concepts: an address card, form and address book, a price summary, payment methods and an approval status badge. They take their data as props and fetch nothing, so a feature package or your own page can render them.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/commerce-ui next next-intl react
    Requirements5
    @labdigital/graphql-fetcher>=3optional
    graphql>=16optional
    next>=16.2.11 <17
    next-intl>=4
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

    @import "@evolve-storefront/commerce-ui/styles.css";

  3. Wrap your app in AddressConfigProvider. Setup lists its props.

  4. Add its translations to your message files with evolve messages.

Then render it on a page:

import {
  AddressCard,
  AddressCardHeader,
  AddressCardTitle,
  AddressLines,
} from "@evolve-storefront/commerce-ui/address-card";
import { type AddressFields, formatAddressLines, fullName } from "@evolve-storefront/core/address";


export function ShippingAddress({ address, locale }: { address: AddressFields; locale: string }) {
  return (
    <AddressCard>
      <AddressCardHeader>
        <AddressCardTitle>{fullName(address)}</AddressCardTitle>
      </AddressCardHeader>
      <AddressLines lines={formatAddressLines(address, { locale, includeName: false })} />
    </AddressCard>
  );
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

AddressBookA searchable, paged address book.
AddressCardThe one address rendering.
AddressDialogModal add/edit address form.
AddressFormAdd/edit an address on the evolve-feature-form pattern: a RAC Form whose validationErrors drive display, clean until the first submit then live, and a submit button that is never disabled.
ApprovalStatusBadgeAn order's approval state, as a pill.
PaymentMethodsChoose how to pay — one picker for the cart, an unpaid order and an invoice alike.
PriceAn amount, formatted for the locale, with each part in its own [data-part] span (currency, integer, group, decimal, fraction, …) so a brand styles one part — a small raised fraction, say — in CSS.
PriceSummaryThe one amount-breakdown rendering: a cart summary, an order breakdown, a quote total, a checkout recap.

Hooks

2 hooks to read and change the data yourself, for when you build your own UI. All hooks

More in this package