Overdrive

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.

Storybook

Visit the Overdrive Storybook site too access foundations, components and API specifications:

overdrive.autoguru.io

Usage

To use Overdrive in your project, install it via yarn:

yarn add @autoguru/overdrive react react-dom

Then, 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>

Thanks

Chromatic for providing visual regression testing.

License

MIT ©AutoGuru

<img src="https://cdn.autoguru.com.au/images/logos/autoguru.svg" alt="AutoGuru" width="150" />