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, React Query, and tRPC.
Composable UI can be integrated with any headless commerce, CMS, and other MACH services of your choice, and comes pre-integrated with Algolia for product filtering, 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!
- Resources
- Deployment / Installation
- Configuring Algolia and Stripe
- Documentation Installation
- What's inside?
- Next Steps
- How to Contribute
📦 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
There 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.
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
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.
- You will be prompted to enter a value for the NEXTAUTH_SECRET environment variable. See the NextAuth docs for more information, including a script for how to generate a secure secret that will be used for cookie JWT encryption.
- Next, it will build and deploy the new site on Vercel.
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.
- You will be prompted to enter a value for the NEXTAUTH_SECRET environment variable. See the NextAuth docs for more information, including a script for how to generate a secure secret that will be used for cookie JWT encryption.
- Next, it will build and deploy the new site on Netlify.
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
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.
You can use Algolia's free tier to get started.
Follow the instructions in the documentation to configure Algolia.
You can create a free Stripe account to get started.
Follow the instructions in the documentation to configure Stripe.
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
Use the button below to build and deploy your own copy of Composable UI Docs to Vercel:
Use the button below to build and deploy your own copy of Composable UI Docs to Netlify:
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
To start with building your next composable commerce site using Composable UI, refer to the official Composable UI Documentation!
We always seek contributors to help us fix bugs, build new features, or help us improve the project documentation. Check out our Contributing Guide if interested.