Skip to content

thibault0712/gauge-demo

 
 

Repository files navigation

vercel/gauge

This is the open-source Tailwindcss version of Vercel's beautiful Gauge React component to indicate a status.

gauge demo image

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

    cp ./app/gauge.tsx your-project/components/gauge.tsx

    or go directly to it here: gauge.tsx

  2. Add keyframes and animation to your tailwind.config.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

    import { Gauge } from "@/components/gauge";
    
    export default function Home() {
      return (
       <>
         // ...
         <Gauge value={80} size="small" showValue={true} />
         // ...
       </>
      )
    }

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 design team for the awesome component.
  • Thanks to @shadcn who gave me a new joy for UI design.

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 89.1%
  • CSS 8.2%
  • JavaScript 2.7%