---
title: "Catalyst by BigCommerce"
description: "Developer-first ecommerce: customizable UI kit, comprehensive GraphQL API client, optimized for Next.js & React Server Components."
url: "https://vercel.com/templates/next.js/catalyst-by-bigcommerce"
links:
  repository: "https://github.com/bigcommerce/catalyst"
  demo: "https://catalyst-demo.site/"
  deploy: "https://vercel.com/new/clone?demo-title=Catalyst+by+BigCommerce&demo-description=Developer-first+ecommerce%3A+customizable+UI+kit%2C+comprehensive+GraphQL+API+client%2C+optimized+for+Next.js+%26+React+Server+Components.&demo-url=https%3A%2F%2Fcatalyst-demo.site%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3TsvUfGCVcvajSguOlhjlm%2F5dc05aa00fe30e503d5105f3d96edafb%2FCatalyst_OG_Image.png&project-name=Catalyst+by+BigCommerce&repository-name=catalyst-by-bigcommerce&repository-url=https%3A%2F%2Fgithub.com%2Fbigcommerce%2Fcatalyst&from=templates&skippable-integrations=1&env=BIGCOMMERCE_STORE_HASH%2CBIGCOMMERCE_CHANNEL_ID%2CBIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN%2CTURBO_REMOTE_CACHE_SIGNATURE_KEY%2CAUTH_SECRET%2CCLIENT_LOGGER%2CENABLE_ADMIN_ROUTE%2CDEFAULT_REVALIDATE_TARGET&envDescription=These+environment+variables+are+necessary+to+run+your+Catalyst+storefront.&envLink=https%3A%2F%2Fwww.catalyst.dev%2Fdocs%2Fenvironment-variables&root-directory=core"
---

# Catalyst by BigCommerce

Developer-first ecommerce: customizable UI kit, comprehensive GraphQL API client, optimized for Next.js & React Server Components.

<a href="https://catalyst.dev" target="_blank" rel="noopener norerrer">
  <img src="https://storage.googleapis.com/bigcommerce-developers/images/catalyst_readme_banner.png" alt="Catalyst for Composable Commerce Image Banner" title="Catalyst">
</a>

<br />
<br />

<div align="center">

[![MIT License](https://img.shields.io/github/license/bigcommerce/catalyst)](https://github.com/bigcommerce/catalyst/tree/main/LICENSE.md)
[![Lighthouse Report](https://github.com/bigcommerce/catalyst/actions/workflows/lighthouse.yml/badge.svg)](https://github.com/bigcommerce/catalyst/actions/workflows/lighthouse.yml) [![Lint, Typecheck, gql.tada](https://github.com/bigcommerce/catalyst/actions/workflows/basic.yml/badge.svg)](https://github.com/bigcommerce/catalyst/actions/workflows/basic.yml)
[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bigcommerce/catalyst)

</div>

**Catalyst** is the composable, fully customizable headless commerce framework for
[BigCommerce](https://www.bigcommerce.com/). Catalyst is built with [Next.js](https://nextjs.org/), uses
our [React](https://react.dev/) storefront components, and is backed by the
[GraphQL Storefront API](https://docs.bigcommerce.com/developer/docs/storefront/guides/graphql-storefront-api/overview).

By choosing Catalyst, you'll have a fully-functional storefront within a few seconds, and spend zero time on wiring
up APIs or building SEO, Accessibility, and Performance-optimized ecommerce components you've probably written many
times before. You can instead go straight to work building your brand and making this your own.

## Demo

- [Catalyst Demo](https://catalyst-demo.site)

![-----------------------------------------------------](https://storage.googleapis.com/bigcommerce-developers/images/catalyst_readme_hr.png)

<p align="center">
 <a href="https://www.catalyst.dev">🚀 catalyst.dev</a> •
 <a href="https://docs.bigcommerce.com/developer/community/connect">🤗 BigCommerce Developer Community</a> •
 <a href="https://github.com/bigcommerce/catalyst/discussions">💬 GitHub Discussions</a> •
 <a href="https://docs.bigcommerce.com/developer/docs/storefront/catalyst/overview">💡 Documentation</a>
</p>

![-----------------------------------------------------](https://storage.googleapis.com/bigcommerce-developers/images/catalyst_readme_hr.png)

## Deploy via One-Click Catalyst App

The easiest way to deploy your Catalyst Storefront is to use the [One-Click Catalyst App](http://login.bigcommerce.com/deep-links/app/53284) available in the BigCommerce App Marketplace.

Check out the [Commerce One-Click Catalyst Documentation](https://docs.bigcommerce.com/developer/docs/storefront/catalyst/getting-started/workflows/one-click-catalyst) for more details.

## Getting Started

**Requirements:**

- A [BigCommerce account](https://www.bigcommerce.com/start-your-trial)
- Node.js version 24
- Corepack-enabled `pnpm`

  ```bash
  corepack enable pnpm
  ```

1. Install the latest version of Catalyst:

   ```bash
   pnpm create @bigcommerce/catalyst@latest
   ```

2. Run the local development server:

   ```bash
   pnpm run dev
   ```

Learn more about Catalyst at [catalyst.dev](https://catalyst.dev).

## Resources

- [Catalyst Documentation](https://docs.bigcommerce.com/developer/docs/storefront/catalyst/overview)
- [GraphQL Storefront API Playground](https://docs.bigcommerce.com/developer/docs/storefront/guides/graphql-storefront-api/overview#accessing-the-graphql-storefront-playground)
- [BigCommerce DevDocs](https://docs.bigcommerce.com/developer/docs/overview/quick-start)

## Related Templates

### [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate)

Get started with Next.js and React in seconds.

### [Next.js + BigCommerce Starter](https://vercel.com/templates/next.js/bigcommerce-starter-nextjs)

A Next.js 14 and App Router-ready headless storefront template for BigCommerce.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.