Skip to content


Repository files navigation

npm version CircleCI


You can find documentation and examples on our docs page.

Quick start guide

Add BigDesign and styled-components@5 to your project using npm:

npm install @bigcommerce/big-design styled-components@5

or with pnpm:

pnpm add @bigcommerce/big-design styled-components@5

Add the font as a <link> in your index.html/<head> element.

  <link rel="preconnect" href="" />
  <link rel="preconnect" href="" crossorigin="" />
  <link href=";300;400;600&display=swap" rel="stylesheet" />

Import the GlobalStyles component and use it once in your app. This will set a few styles globally and add normalize.css. We recommend placing it close to your root component. Then import any component, such as Button, to use it anywhere in your app.

import { Button, GlobalStyles } from '@bigcommerce/big-design';


  <GlobalStyles />
  <Button>Click me</Button>


This is a monorepo that uses Lerna and pnpm Workspaces.

Workspaces are inside the packages directory.


As this is a monorepo, each package has it's own Changelog. Links for each can be found below


To contribute, please read our Contributing guidelines and Code of Conduct first.


Running the following commands will run big-design and docs in watch mode.

pnpm run build:icons
pnpm run start

Run tests with:

pnpm run test

Update snapshots with:

pnpm build
cd packages/big-design
pnpm run test --update-snapshot

Run linter with:

pnpm run lint


This is for releasing new versions of all the packages.

GH_TOKEN=<token> pnpm lerna publish <patch/minor/major> --sign-git-commit --sign-git-tag --create-release github --git-remote upstream


GH_TOKEN=<token> pnpm lerna publish prerelease --pre-dist-tag next --conventional-prerelease --sign-git-commit --sign-git-tag --create-release github --git-remote upstream

To promote a prerelease add the --conventional-graduate flag to release command.

GH_TOKEN=<token> pnpm lerna publish <patch/minor/major> --conventional-graduate --sign-git-commit --sign-git-tag --create-release github --git-remote upstream


from-package allows you to release what's on upstream/main if the publish script failed. By default the lerna publish command will push commits and tags before running through the build. This is a just-in-case command.

GH_TOKEN=<token> pnpm lerna publish from-package --git-remote upstream

BigDesign Documentation Release

pnpm run build
cd packages/docs
pnpm run deploy --remote upstream


Big Design is licensed under MIT and CC BY 3.0. See for more details.