BigDesign React Patterns.
You can find documentation and examples on our docs page.
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.
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>
);
}