Installations

npm install @bigcommerce/big-design-patterns

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

20.18.2

NPM Version

10.8.2 Pull Requests

Open

9

Total

1,532

Closed

182

Merged

1,341

Issues

Open

20

Total

104

Closed

84

Releases

395

@bigcommerce/docs@1.4.0

Published on 05 Feb 2025

@bigcommerce/big-design@1.7.0

Published on 05 Feb 2025

@bigcommerce/big-design-patterns@2.0.5

Published on 05 Feb 2025

@bigcommerce/docs@1.3.2

Published on 18 Dec 2024

@bigcommerce/big-design-patterns@2.0.4

Published on 18 Dec 2024

@bigcommerce/big-design-icons@1.2.1

Published on 18 Dec 2024

View all 395 releases

Contributors

410

View all 410 contributors

Languages

4

TypeScript

MDX

JavaScript

HTML

TypeScript (98.24%)

MDX (1.3%)

JavaScript (0.44%)

HTML (0.01%)

Developer

bigcommerce

Download Statistics

Total Downloads

1,979

Last Day

28

Last Week

77

Last Month

351

Last Year

1,979

GitHub Statistics

50 Stars

1,541 Commits

65 Forks

41 Watching

16 Branches

410 Contributors

Bundle Size

6.11 kB

Minified

2.05 kB

Minified + Gzipped

Bundlephobia

Maintainers

15

Package Meta Information

Latest Version

2.0.5

Package Id

@bigcommerce/big-design-patterns@2.0.5

Unpacked Size

67.65 kB

Size

16.75 kB

File Count

63

NPM Version

10.8.2

Node Version

20.18.2

Publised On

05 Feb 2025

Total Downloads

Cumulative downloads

Total Downloads

1,979

Last day

75%

28

Compared to previous day

Last week

10%

77

Compared to previous week

Last month

-34.9%

351

Compared to previous month

Last year

0%

1,979

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

@babel/runtime

Peer Dependencies

6

react react-dom styled-components @bigcommerce/big-design @bigcommerce/big-design-icons @bigcommerce/big-design-theme

Dev Dependencies

35

Versions

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}

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Security-Policy

Determines if the project has published a security policy.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

License

Determines if the project has defined a license.

8

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

5

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

SAST

Determines if the project uses static code analysis.

Score

5.8

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More