BigDesign

BigDesign React components.

Documentation

You can find documentation and examples on our docs page.

Quick start guide

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

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

or with pnpm:

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

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

<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+3:wght@200;300;400;600&display=swap" rel="stylesheet" />
</head>

If using Next.js, utilize the next/fonts/google import:

import { Source_Sans_3 } from 'next/font/google';

const sourceSans3 = Source_Sans_3({
  display: 'swap',
  weight: ["200", "300", "400", "600"],
  subsets: ['latin'],
});

See https://nextjs.org/docs/app/api-reference/components/font for more details on how to apply the font.

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';

// ...

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

Version support

| Versions | React | styled-components | Status | | --- | --- | --- | --- | | 5.x (latest) | 19 | ^6.1.14 | Active | | 4.0.0 | 18 | ^6.1.14 | Deprecated, do not use (broken Flex/Grid/icon layout defaults; see npm deprecation notice) | | 3.x | 18 | ^5 | Maintained; backports considered case-by-case |