# BigDesign [](https://www.npmjs.com/package/@bigcommerce/big-design) [](https://circleci.com/gh/bigcommerce/big-design)
BigDesign React components.
### Documentation
You can find documentation and examples on our [docs page](https://bigcommerce.github.io/big-design).
### Quick start guide
Add BigDesign and styled-components@5 to your project using `npm`:
```
npm install @bigcommerce/big-design styled-components@5
```
or with `pnpm`:
```
pnpm add @bigcommerce/big-design styled-components@5
```
Add the font as a `` in your `index.html`/`` element.
```html
```
If using Next.js, utilize the `next/fonts/google` import:
```tsx
import { Source_Sans_3 } from 'next/font/google';
const sourceSans3 = Source_Sans_3({
display: 'swap',
weight: ["200", "300", "400", "600"],
subsets: ['latin'],
});
```
See https://nextjs.org/docs/app/api-reference/components/font for more details on how to apply the font.
Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally
and add [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to
your root component. Then import any component, such as `Button`, to use it anywhere in your app.
```jsx
import { Button, GlobalStyles } from '@bigcommerce/big-design';
// ...
```