Overdrive is a product component library, and design system for AutoGuru. Built with React, TypeScript, Vanilla Extract, and Storybook.
The components are housed in Storybook which provides interactive documentation, UI playground, and interaction testing.
Visit the Overdrive Storybook site too access foundations, components and API specifications:
To use Overdrive in your project, install it via yarn:
yarn add @autoguru/overdrive react react-domThen, import the reset and configure the Overdrive Provider with the theme you want to use:
import { OverdriveProvider, Button } from '@autoguru/overdrive';
<OverdriveProvider>
<Button variant="primary">Hello World</Button>
</OverdriveProvider>;The Overdrive Provider automatically applies global base styles to the body tag.
If you need more control over where the global base styles are applied, you can
also apply data-od-base to any element.
You can also customise the theme colours using the provider props:
<OverdriveProvider
theme={baseTheme}
colorOverrides={{
primaryBackground: '#FF0000',
primaryForeground: '#FFFFFF',
primaryBackgroundMild: '#FFE5E5',
primaryBackgroundStrong: '#CC0000',
primaryBorder: '#CC0000',
}}
>
<Button variant="primary">Custom Red Theme</Button>
</OverdriveProvider>Chromatic for providing visual regression testing.
MIT ©AutoGuru
