Bain Logo

Getting Started

Jump to Props

For Developers


In order to use this library, your project needs to fit these requirements:

  • It's a web-based project using ReactJS.
  • For styling, you'll use CSS-in JS provided by Emotion.


  1. Install the following libraries to your project:
  1. In your App.js or equivalent, use <AdaptThemeProvider /> and set the global fonts*.

* Note that the use of GlobalStyle is optional; it's basically just a way to set some global defaults that can still hook into the theme often useful for setting the font to be the default theme font to override browser defaults. Most of the time you should be using ADAPT Design System components or create your own components that hook into the theme.

  1. Add the Fonts Depending on your project setup, the path to your font files may differ.
  • Note that the default font is not licensed for all to use. If you are not able to use the default font (Graphik), please replace it with InterUI
  1. You're ready to go! Import components as you need them.


  • The ADAPT Design System uses Emotion and Styled System to provide styles. Read more about Style Props.
  • All components and styles are derived from a central JavaScript object called a theme object. Read more about Theming].
    • A theme can be overriden, extended and also provide an optional Dark Mode.
© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy