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.
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>