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 you can pass to the components for further configuration.

Getting Started

Add BigDesign and styled-components to your project:

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

Import the GlobalStyles component and use it once in your app. This will set a few styles globally, including a base font family, Source Sans Pro and 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';
// ...
<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.