BigDesign Patterns

BigDesign React Patterns.

Documentation

You can find documentation and examples on our docs page.

Quick start guide

Add @bigcommerce/big-design, @bigcommerce/big-design-patterns and styled-components@5 to your project using npm:

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

or with pnpm:

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

Setup BigDesign as per the Quick start guide and then import any pattern, such as Page and Header, to use it anywhere in your app.

1import { Panel } from '@bigcommerce/big-design';
2import { AddIcon } from '@bigcommerce/big-design-icons';
3import { Page, Header } from '@bigcommerce/big-design-patterns';
4
5export default function App() {
6  const header = (
7    <Header
8      title="Products"
9      description="View and manage your products."
10      actions={[{ text: 'Add new', iconLeft: <AddIcon /> }]}
11    />
12  );
13
14  return (
15    <Page header={header}>
16      <Panel header="Main content">
17        ...
18      </Panel>
19    </Page>
20  );
21}