@bigcommerce/big-design-patterns
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

BigDesign Patterns npm version CircleCI

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>
  );
}

Readme

Keywords

none

Package Sidebar

Install

npm i @bigcommerce/big-design-patterns

Weekly Downloads

91

Version

2.0.1

License

(MIT AND CC-BY-3.0)

Unpacked Size

69.3 kB

Total Files

63

Last publish

Collaborators

  • erik.christensen
  • leebigcommerce
  • toma-r
  • cilo
  • jorgemoya
  • bcnpmuser
  • icatalina
  • chris.boulton
  • bcandreik
  • davidchin
  • pascal.zajac
  • deini
  • chanceaclark
  • jairobc
  • jmwiese