You can find documentation and examples on our docs page.
Add BigDesign and styled-components@5 to your project using npm:
npm install @bigcommerce/big-design styled-components@5
or with yarn:
yarn add @bigcommerce/big-design styled-components@5
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+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.
import { Button, GlobalStyles } from '@bigcommerce/big-design';
...
<App>
<GlobalStyles />
<Button>Click me</Button>
</App>This is a monorepo that uses Lerna and Yarn Workspaces.
Workspaces are inside the packages directory.
- big-design: React component library.
- big-design-theme: Default Theme.
- big-design-icons: Icons library.
- docs: Documentation live here.
- configs: (internal) Shared configs between packages.
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.
yarn
yarn run build
yarn run start
Run tests with:
yarn run test
Run linter with:
yarn run lint