Commerce Layer is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.

Getting started

Install the package as dependency

pnpm install @commercelayer/app-elements

Add global css in your app index.tsx

import "@commercelayer/app-elements/style.css";


React.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

load Manrope Google font into your html

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link
    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
    rel="stylesheet"
  />
</head>

Import any components your need

import { Container, Button, Label } from "@commercelayer/app-elements";

(optional) install @commercelayer/sdk to use <TokenProvider> component

Preact

Support for preact is provided out of the box, thanks to the fact we are not including React jsx-runtime modules in bundled files. The application where this package is installed to is responsible of this. But no extra configuration should be required in your project, in fact all latest versions of vite, react and preact will handle this automatically.

FAQs

What is @commercelayer/app-elements?

Is @commercelayer/app-elements well maintained?

Package last updated on 31 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install