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@6 to your project using npm:

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

or with pnpm:

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

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.

import { Panel } from '@bigcommerce/big-design';
import { AddIcon } from '@bigcommerce/big-design-icons';
import { Page, Header } from '@bigcommerce/big-design-patterns';

export default function App() {
  const header = (
    <Header
      title="Products"
      description="View and manage your products."
      actions={[{ text: 'Add new', iconLeft: <AddIcon /> }]}
    />
  );

  return (
    <Page header={header}>
      <Panel header="Main content">
        ...
      </Panel>
    </Page>
  );
}