https://github.com/autoguru-au/overdrive
🚗💨 AutoGuru's design system
https://github.com/autoguru-au/overdrive
component design-system front-end library react storybook styleguide typescript ui
Last synced: 14 days ago
JSON representation
🚗💨 AutoGuru's design system
- Host: GitHub
- URL: https://github.com/autoguru-au/overdrive
- Owner: autoguru-au
- License: mit
- Created: 2019-03-06T02:16:25.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2026-06-09T01:45:05.000Z (15 days ago)
- Last Synced: 2026-06-09T03:22:50.662Z (15 days ago)
- Topics: component, design-system, front-end, library, react, storybook, styleguide, typescript, ui
- Language: TypeScript
- Homepage: http://overdrive.autoguru.io
- Size: 48.1 MB
- Stars: 47
- Watchers: 4
- Forks: 3
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: license
- Codeowners: .github/CODEOWNERS
- Roadmap: docs/ROADMAP.md
- Agents: AGENTS.md
Awesome Lists containing this project
- awesome-list - overdrive - au | 35 | (TypeScript)
README
---
# Overdrive
Overdrive is a product component library, and design system for AutoGuru. Built
with [React](https://github.com/facebook/react),
[TypeScript](https://github.com/Microsoft/typescript),
[Vanilla Extract](https://github.com/vanilla-extract-css/vanilla-extract/), and
[Storybook](https://github.com/storybooks/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](http://overdrive.autoguru.io/)
## Usage
To use Overdrive in your project, install it via yarn:
```sh
yarn add @autoguru/overdrive react react-dom
```
Then, import the reset and configure the Overdrive Provider with the theme you
want to use:
```jsx
import { OverdriveProvider, Button } from '@autoguru/overdrive';
Hello World
;
```
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:
```jsx
Custom Red Theme
```
## Thanks
[Chromatic](https://www.chromatic.com) for providing visual regression testing.
## License
MIT ©[AutoGuru](https://www.autoguru.com.au/)
