Circular Gauge Component for React Apps


Gauge is an aesthetic and customizable circular SVG gauge component for React applications.

It can be easily integrated into React projects to display data visually as a gauge or circular progress bar.

Ideal for real-time data representation in applications like dashboards.

How to use it:

1. Install and import the Gauge component into your React app.

# Yarn
$ yarn add @suyalcinkaya/gauge
$ npm install @suyalcinkaya/gauge
$ pnpm install @suyalcinkaya/gauge
$ bun add @suyalcinkaya/gauge
import { Gauge } from '@suyalcinkaya/gauge'

2. Add the Gauge component to the app and specify the initial value as follows:

<Gauge value={23} />

3. Available component props to customize the Gauge.

  • value – Current value of the gauge, expressed as a percentage.
  • size – Width and height of the gauge. Defaults to ‘md’.
  • gapPercent – Percentage of the total circumference that represents a gap in the gauge. Defaults to 5%.
  • strokeWidth – Stroke width of the gauge. Defaults to 10px.
  • variant – Direction of the gauge’s animation. Defaults to ‘ascending’.
  • showValue – Option to display the numeric value inside the gauge. Defaults to false.
  • showAnimation – Option to animate the gauge’s progress. Defaults to false.
  • primary – Primary color or set of colors for the gauge, with optional threshold values to determine color changes.
  • secondary – Secondary color or set of colors for the gauge, similar to `primary`.
  • props – Configuration and properties for the svg.


Circular Gauge Component for React Apps


Add Comment