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:

importcommerceElementsfrom'commerce-elements/tailwind';exportdefault{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';functionApp(){return(<div><Buttonvariant="primary">Click me</Button><Buttonvariant="secondary"size="small">
Small Button
</Button></div>);}

Using Tailwind Utilities

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

<divclassName="bg-primary text-background"><h1className="text-foreground font-heading">Hello World</h1><pclassName="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:220100%50%; /* HSL: hue saturation lightness */--foreground:00%7%;
--background:00%100%;
/* ... override any variables */
}

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

// app/layout.tsximport'commerce-elements/styles';

/* app/globals.css */@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--primary:220100%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