BigDesign – Bigcommerce – knowledgebase JJ

BigCommerce’s library of React components lets developers build stylish apps that have a native BigCommerce feel at their core. The components implement BigDesign principles to allow us to create an empathetic and frictionless user experience. Each component has props that can be passed for further configuration.

Step 1 :-

Add BigDesign and styled-components to your project:

npm install @bigcommerce/big-design styled-components@5
Step 2:-
 Add 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+Pro:wght@200;300;400;600&display=swap" rel="stylesheet" /> 
</head>
Step 3:-
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>

Leave a comment Cancel reply