Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (commerce-elements) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Commerce Elements

A collection of modern, accessible commerce UI components built with React, TypeScript, and Tailwind CSS.

Requirements

React 18+ or 19+
Tailwind CSS 3+

Installation

npm install commerce-elements
# or
yarn add commerce-elements
# or
pnpm add commerce-elements

Install the optional Tailwind plugins (recommended):

npm install -D @tailwindcss/container-queries @tailwindcss/typography tailwindcss-animate

Setup

1. Configure Tailwind

Add the Commerce Elements preset and content path to your tailwind.config.js:

import commerceElements from 'commerce-elements/tailwind';

export default {
  presets: [commerceElements],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/commerce-elements/dist/**/*.{js,mjs}', // Add this line
  ],
  // ... your other config
};

2. Import Base Styles

Import the CSS variables in your JavaScript/TypeScript (recommended):

// app/layout.tsx (Next.js) or main.tsx (Vite/React)
import 'commerce-elements/styles';

Or if importing in CSS, it must come before the Tailwind directives:

/* app.css or globals.css */
@import 'commerce-elements/styles';

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Use Components

import { Button } from 'commerce-elements';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Button variant="secondary" size="small">
        Small Button
      </Button>
    </div>
  );
}

Using Tailwind Utilities

Once configured, you can use all the custom Tailwind utilities from Commerce Elements:

<div className="bg-primary text-background">
  <h1 className="text-foreground font-heading">Hello World</h1>
  <p className="text-contrast-400">This uses the design system colors!</p>
</div>

Available color utilities:

bg-primary, text-primary, border-primary
bg-accent, text-accent, etc.
bg-success, bg-error, bg-warning, bg-info
bg-background, bg-foreground
bg-contrast-100 through bg-contrast-500

And many more custom utilities for typography, animations, and effects.

Customization

Override CSS variables to customize the design system:

/* app/globals.css */
@import 'commerce-elements/styles';

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: 220 100% 50%; /* HSL: hue saturation lightness */
  --foreground: 0 0% 7%;
  --background: 0 0% 100%;
  /* ... override any variables */
}

Recommended: Import styles in JavaScript and override variables in CSS:

// app/layout.tsx
import 'commerce-elements/styles';

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: 220 100% 50%;
  /* ... your custom values */
}

Documentation

For detailed component documentation, examples, and interactive demos, visit our Storybook (coming soon).

TypeScript

Full TypeScript support with included type definitions.

License

MIT