Getting the Most Out of the BigDesign Component Library

Component libraries have become an invaluable tool for frontend developers looking to quickly spin up usable apps without putting too much thought into design and styling. Companies like Google and Twitter have created their own libraries to unify experiences across their platforms, and BigCommerce is no different. We’ve built a library of reusable components for a consistent feel and user experience across products. These components have been created for both internal and external use, so whether you’re a developer at BigCommerce, a partner app developer, or just someone interested in trying out our new library, keep reading for some tips for making the most of BigDesign in your app.

Getting Started

BigDesign is a React component library, so you’ll need to be working within the React framework to utilize BigDesign. Create react app is a simple tool for quickly spinning up a React application that you can begin working in. The BigDesign docs cover installing BigDesign and Styled Components as follows:

If you plan to utilize BigDesign theme or icons directly in your app, then you’ll also want to install those dependencies:

Once installed, follow directions in the docs for global styles and then you’re ready to begin working with BigDesign! A quick note: a few components in this library are more complex than in other libraries and maybe somewhat challenging for beginners — I’ll continue to link resources throughout to help with that.

Tips for Using BigDesign

My favorite aspect about getting familiar with BigDesign is that, unlike some popular component libraries, the dev playground contains live editable examples. With this tool, you can experiment with values and value-types that you can pass as props and discover which attributes are (and are not) available to use. Here’s an example of a simple component, the <Button>, and how its props may be manipulated in the dev playground:

Each component has its own set of properties, and many of them inherit or extend the properties of other components, such as the way the <Flex> component inherits <Box> properties. Most components in BigDesign are highly opinionated, so the majority of prop options are immutable. This allows us to keep a consistent feel across the platform and partner apps without hacky workarounds, but can potentially feel limiting if you’re trying to get creative. This means no classes, no in-line styles, and no extending with styled components can be used with those components. Examples of highly opinionated components include the <Button> and typographical components. However, other components like <Box> are mutable, as shown here:

Advanced Styled Components and theme injection come in handy here as they allow us access to BigDesign themes. With that, we can change the CSS properties that are not directly available in the component’s props (like font color) and/or style custom components with consistency. You can learn more about advanced styled components and how to use them here.

Assigning props for <Box> and <Panel> are straightforward. However, some other BigDesign components may require greater complexity due to how props are used. The developer must provide more information to display them correctly. One example of such a component is <Pagination> — the component will use the props that are given, but other functions are required to make it behave properly. Below is an example from the docs (Note: to understand some of the examples provided, it is helpful to have a basic understanding of React Hooks):

Another useful aspect of BigDesign is its mobile-first orientation. Not only are the components responsive, but there are also display props available to some components that allow developers to specify the CSS display attribute as well as determine how the component displays at different breakpoints. Additionally, there is a breakpoints attribute exposed in the BigDesign theme that may be used and customized by Styled Components.

Why and How to Use BigDesign

BigDesign components radically reduce the amount of time to spin up an application and take the strain of design off developers’ shoulders. It is WCAG compliant (accessible / a11y), mobile and tablet responsive, open-source, design-specific, and coherent. You can experiment in the sandbox or spin up your own quick sample app to give it a test drive before implementing it in your project.

Though BigDesign is an internal tool, it was created as an open-source project with the intent of gathering community feedback for improvements and to allow partners, etc. to use it to create their own apps. This means a rapidly improving and regularly changing library. We are constantly working to refine existing components and create new ones as our needs and our partners’ needs evolve. We invite you to explore the repo and submit an issue or pull request if you find ways to improve the library. Looking forward to seeing you on Github!