Home

Awesome

<p align="center"> <a href="http://overdrive.autoguru.io/"> <img alt="@autoguru/overdrive" src="https://github.com/autoguru-au/overdrive/blob/main/assets/logo.png?raw=true" width="100%"> </a> </p> <div align="center"> <a href="https://codecov.io/gh/autoguru-au/overdrive" target="_blank"><img src="https://img.shields.io/codecov/c/gh/autoguru-au/overdrive/main.svg?style=for-the-badge"/></a> <a href="https://www.npmjs.com/package/@autoguru/overdrive" target="_blank"><img src="https://img.shields.io/npm/v/@autoguru/overdrive/latest.svg?style=for-the-badge"/></a> </div>

Overdrive

Overdrive is a product component library and design system for AutoGuru, built with React, TypeScript, Vanilla Extract, and Storybook.

Storybook playground.

Overdrive is a product component library, and design system for AutoGuru. Built with React, TypeScript, Vanilla Extract, and Storybook.

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 OverdriveProvider with the theme you want to use:

import '@autoguru/overdrive/reset';
// It is important that the reset import happens before any of this.
import { baseTheme } from '@autoguru/overdrive/lib/themes';
import { OverdriveProvider, Button } from '@autoguru/overdrive';

<OverdriveProvider theme={baseTheme}>
	<Button variant="primary">Hello World</Button>
</OverdriveProvider>;

Documentation

For more information on Overdrive's API and usage, check out the docs.

Thanks

Chromatic for providing component screenshot testing.

License

MIT © AutoGuru

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