Composable UI provides the foundation for building blazing-fast modern composable commerce sites. It is built with best-in-class technologies including React, Next.js, Typescript, Chakra UI, and React Query.
Composable UI can be integrated with any headless commerce, CMS, and other MACH services of your choice, but comes pre-integrated with Algolia search, Stripe for payments, and mocked commerce and CMS services.
Composable UI offers the following:
- Composable UI app built with React & Next.js
- Figma Design Kit & Ready-to-Use Components Library
- Documentation
Composable UI is, and always will be, open source and freely available under the MIT license.
Start building your dream commerce site today with Composable UI!
Table of Contents
- Resources
- Deployment / Installation
- Configuring Algolia and Stripe
- Documentation Installation
- What's inside?
- Next Steps
Resources
📦 Installation: See sections below for 1-click Deploy, Docker & Localhost
🖥 Storefront: https://storefront.composable.com
📘 Documentation: https://docs.composable.com
🔆 Figma: http://figma.composable.com
ℹ️ Learn More: https://www.composable.com
Deployment / Installation
The are multiple methods of running and deploying Composable UI.
Be sure to read the documentation on Composable UI's environment variables. When deploying to a cloud provider like Vercel or Netlify you must set the NEXTAUTH_SECRET environment variable. For more information on Composable UI environment variables, see the Application Configuration section. See these links on how to set environment variables for Netlify and Vercel.
- Option 1: Run in Localhost
- Option 2: 1-Click Deployment to Vercel
- Option 3: 1-Click Deployment to Netlify
- Option 4: Run in Docker
You can host Composable UI on any service that supports Next.js.
After installing Composable UI, we recommend also taking a few moments to configure Algolia and Stripe to take full advantage of Composable UI's base features.
Option 1: Run in Localhost
To run locally, ensure that you have installed:
- Node.js v16.18.0 or higher
- pnpm v8.0 or higher
For more information about the installation, see the Installation page section.
Perform the following operations in your terminal:
git clone https://github.com/composable-com/composable-ui
cd composable-ui
pnpm i
pnpm devYou should now have the Composable UI application running locally. Go to your web browser and navigate to http://localhost:3000
Option 2: 1-Click Deployment to Vercel
Use the button below to build and deploy your own copy of Composable UI to Vercel:
- You’ll be prompted to authenticate with GitHub and choose a repository name.
- Vercel will then automatically create a repository in your GitHub account with a copy of the files from the Composable UI repository.
- Next, it will build and deploy the new site on Vercel.
Option 3: 1-Click Deployment to Netlify
Use the button below to build and deploy your own copy of Composable UI to Netlify:
- You’ll be prompted to authenticate with GitHub and choose a repository name.
- Netlify will then automatically create a repository in your GitHub account with a copy of the files from the Composable UI repository.
- Next, it will build and deploy the new site on Netlify.
Option 4: Run in Docker
You can also run the Composable UI app easily using Docker and not worry about local dependencies. If you don't already have Docker installed, first install Docker before proceeding below.
Clone, build and run the Docker image:
git clone https://github.com/composable-com/composable-ui
cd composable-ui
docker-compose up --buildYou should now have the Composable UI application running through Docker. Go to your web browser and navigate to http://localhost:3000
Configuring Algolia and Stripe
In order to take full advantage of Composable UI, you must configure Algolia and Stripe. If you do not, the Product Listing Page (PLP) and Checkout pages will not function correctly.
Algolia Setup
You can use Algolia's free tier to get started.
Follow the instructions in the documentation to configure Algolia.
Stripe Setup
You can create a free Stripe account to get started.
Follow the instructions in the documentation to configure Stripe.
Documentation Installation
Composable UI comes with documentation powered by Docusaurus. We encourage contributing documentation alongside code.
You can run Docusaurus by executing the following in the terminal:
cd docs
yarn install
yarn startYou should now have the Docusaurus application running locally. Go to your web browser and navigate to http://localhost:3001
Alternatively, you can view the latest documentation directly at https://docs.composable.com
Deployment
1-Click Deployment to Vercel
Use the button below to build and deploy your own copy of Composable UI Docs to Vercel:
1-Click Deployment to Netlify
Use the button below to build and deploy your own copy of Composable UI Docs to Netlify:
What's inside?
This workspace uses PNPM as a package manager. It includes the following packages/apps:
composable-ui: a Next.js applicationpackages/cms-generic: an example implementation of a CMS enginepackages/commerce-generic: an example implementation of an ecommerce enginepackages/eslint-config-custom:eslintconfigurations (includeseslint-config-nextandeslint-config-prettier)packages/stripe: stripe utilities and implementationpackages/tsconfig:tsconfig.jsonused throughout the monorepopackages/types: types shared between the Next.jsappand integration packagespackages/ui: a react component libraryscripts: Utilities to automate common tasks
Next Steps
To start with building your next composable commerce site using Composable UI, refer to the official Composable UI Documentation!