https://github.com/papermark/gauge-demo
https://github.com/papermark/gauge-demo
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/papermark/gauge-demo
- Owner: papermark
- Created: 2023-08-14T15:08:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T05:54:54.000Z (almost 2 years ago)
- Last Synced: 2025-05-10T03:32:48.398Z (12 months ago)
- Language: TypeScript
- Homepage: https://gauge-demo.vercel.app
- Size: 113 KB
- Stars: 132
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vercel/gauge
This is the open-source Tailwindcss version of Vercel's beautiful Gauge React component to indicate a status.
## Demo
View the demo here: https://gauge-demo.vercel.app
View the original Vercel design system here: [Gauge](https://vercel.com/design/gauge)
## Installation
### Requirements
- `tailwindcss`
- `tailwindcss-animate`
It's pretty easy to install. I made it a standalone component that you can copy in your codebase.
1. Copy the `gauge` component
```sh
cp ./app/gauge.tsx your-project/components/gauge.tsx
```
or go directly to it here: [gauge.tsx](https://github.com/mfts/gauge-demo/blob/main/app/gauge.tsx)
2. Add keyframes and animation to your `tailwind.config.ts`
```ts
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
keyframes: {
gauge_fadeIn: {
from: { opacity: "0" },
to: { opacity: "1" },
},
gauge_fill: {
from: { "stroke-dashoffset": "332", opacity: "0" },
to: { opacity: "1" },
},
},
animation: {
gauge_fadeIn: "gauge_fadeIn 1s ease forwards",
gauge_fill: "gauge_fill 1s ease forwards",
},
},
},
plugins: [require("tailwindcss-animate")],
};
export default config
```
3. Import into your page
```ts
import { Gauge } from "@/components/gauge";
export default function Home() {
return (
<>
// ...
// ...
>
)
}
```
## API
The `Gauge` component takes three props: `value`, `size`, `showValue`.
- `value`: a **number** from `0` to `100`
- `size`: a **string** ("small", "medium", "large"). Defaults to: `"small"`
- `color`: a **string** (all text- of tailwinds like text-green-500). Defaults to: `"text-[hsla(131,41%,46%,1)]"`
- `bgColor`: a **string** (all text- of tailwinds like text-green-500). Defaults to: `"text-[#333]"`
- `showValue`: a **boolean** to show the number inside the gauge or not. Defaults to: `true`
## Inspiration
- Thanks to the [@vercel](https://x.com/vercel) design team for the awesome component.
- Thanks to [@shadcn](https://x.com/shadcn) who gave me a new joy for UI design.