@bigcommerce/big-design
v2.4.1
Published
BigDesign React components.
Downloads
15,711
Keywords
Readme
BigDesign 
BigDesign React components.
Documentation
You can find documentation and examples on our docs page.
Quick start guide
Add BigDesign and styled-components@5 to your project using npm:
npm install @bigcommerce/big-design styled-components@5or with pnpm:
pnpm add @bigcommerce/big-design styled-components@5Add the font as a <link> in your index.html/<head> element.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&display=swap" rel="stylesheet" />
</head>If using Next.js, utilize the next/fonts/google import:
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. We recommend placing it close to
your root component. Then import any component, such as Button, to use it anywhere in your app.
import { Button, GlobalStyles } from '@bigcommerce/big-design';
// ...
<App>
<GlobalStyles />
<Button>Click me</Button>
</App>