Installations

npm install @bigcommerce/big-design-theme

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

20.16.0

NPM Version

10.8.1 Score

59.9

Supply Chain

79.2

Quality

86.3

Maintenance

100

Vulnerability

98.6

License

Pull Requests

Open

10

Total

1,532

Closed

182

Merged

1,340

Issues

Open

20

Total

104

Closed

84

Releases

392

@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

@bigcommerce/big-design@1.6.2

Published on 18 Dec 2024

@bigcommerce/big-design@1.6.1

Published on 16 Dec 2024

@bigcommerce/docs@1.3.1

Published on 16 Dec 2024

View all 392 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

300,384

Last Day

346

Last Week

1,529

Last Month

7,204

Last Year

80,871

GitHub Statistics

50 Stars

1,540 Commits

65 Forks

41 Watching

16 Branches

410 Contributors

Bundle Size

19.69 kB

Minified

6.72 kB

Minified + Gzipped

Bundlephobia

Maintainers

15

Package Meta Information

Latest Version

1.1.0

Package Id

@bigcommerce/big-design-theme@1.1.0

Unpacked Size

60.18 kB

Size

16.63 kB

File Count

65

NPM Version

10.8.1

Node Version

20.16.0

Publised On

21 Aug 2024

Total Downloads

Cumulative downloads

Total Downloads

300,384

Last day

-13.3%

346

Compared to previous day

Last week

-16.2%

1,529

Compared to previous week

Last month

3.1%

7,204

Compared to previous month

Last year

9.9%

80,871

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

2

@babel/runtime polished

Peer Dependencies

3

react react-dom styled-components

Dev Dependencies

24

Versions

BigDesign Theme

BigDesign design system.

Documentation

You can find documentation and examples on our docs page.

Note

BigDesign components use this theme by default. This package is only meant to be used directly when more advanced features are needed such as:

When you app uses an html font size different than 16px.
Creating a brand new theme.
Typescript typings.

Quick start guide

Add the BigDesign theme and styled-components@5 to your project using npm:

npm install @bigcommerce/big-design-theme styled-components@5

or with pnpm:

pnpm add @bigcommerce/big-design-theme styled-components@5

1// index.tsx
2
3import { theme } from '@bigcommerce/big-design-theme';
4import { ThemeProvider } from 'styled-components';
5
6// ...
7
8ReactDOM.render(
9  <ThemeProvider theme={theme}>
10      <App />
11  </ThemeProvider>,
12  document.getElementById('root'),
13);

Using a different html font size

When your app uses an html font size different than 16px you will need to create a new theme that uses your app's html font size internally to calculate spacings and sizes.

The following example show how to create a theme using a 14px html font size and provide the theme to your app.

1import { createTheme } from '@bigcommerce/big-design-theme';
2import { ThemeProvider } from 'styled-components';
3
4const theme = createTheme({ htmlFontSize: 14 });
5
6// ...
7
8<ThemeProvider theme={theme}>
9  <App />
10</ThemeProvider>;

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