BigDesign developer playground

BigCommerce’s library of React components lets developers build stylish apps that have a native BigCommerce feel at their core. Our components implement BigDesign principles to allow you to create an empathetic and frictionless user experience. The documentation will demonstrate the visual style and behavior of each component. Each component has props that can be passed for further configuration.

Helpful resources

Getting started

Add BigDesign and styled-components to your project:

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

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

Code example

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet" />
</head>

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.

Code example

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

// ...

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

Using this documentation

This documentation uses the React components in the BigDesign library so you can edit them and preview them in real time.

  • Select an element or utility in the left menu to view their props, types and descriptions below, including examples.
  • Type directly in the code editor to make changes. Click the time icon to restore the component to default.
  • Click the clipboard icon to copy the code snippet to your clipboard. Click the dual color icon to change the background color of the code editor.