A beautiful Gauge React component to indicate a status

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

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

2. Add keyframes and animation to your tailwind.config.ts

3. Import into your page

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"
• showValue: a boolean to show the number inside the gauge or not. Defaults to: true

Inspiration

• Thanks to the @vercel design team for the awesome component.
• Thanks to @shadcn who gave me a new joy for UI design.

GitHub

View Github