@bigcommerce/big-design-patterns
v2.0.0
Published
BigDesign React Patterns.
Downloads
350
Maintainers
Keywords
Readme
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.
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>
);
}