<p align="center">
<a href="https://github.com/CyanSalt/roughness">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/CyanSalt/roughness/main/docs/roughness-dark.svg">
    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/CyanSalt/roughness/main/docs/roughness.svg">
    <img alt="Roughness" src="https://raw.githubusercontent.com/CyanSalt/roughness/main/docs/roughness.svg">
  </picture>
</a>
<br>
A Vue component library with hand-drawn appearance.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/roughness">
    <img src="https://img.shields.io/npm/v/roughness.svg">
  </a>
</p>

*Hero image generated by [`google-font-to-svg-path`](https://danmarshall.github.io/google-font-to-svg-path/)*

*Font: [Cabin Sketch](https://fonts.google.com/specimen/Cabin+Sketch)*

## Installation

```shell
npm i roughness
```

Or from a CDN like [jsdelivr](https://www.jsdelivr.com/) via HTML.

## Documentation

You can find the documentation [on the website](https://roughness.vercel.app).

## Acknowledgments

Roughness is inspired by [ossinsight-lite](https://github.com/pingcap/ossinsight-lite/), which is based on Rough.js, uses [chartjs-plugin-roughness](https://www.npmjs.com/package/chartjs-plugin-roughness), Cabin Sketch font and grid guide appearance.

Also thanks to Sora and Celeste for their encouragement.

## License

ISC &copy; [CyanSalt](https://github.com/CyanSalt)
