Chamaac UI

Components

  • Overview

    • Introduction
  • Animated Icons

    • Icons Overview
  • Backgrounds

    • Interactive GridNew
  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing BorderNew
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist
  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text
  • Inputs

    • AI InputNew
  • Navigation

    • Dock
  • Sections

    • Stats CardsNew
    • Feature Steps
    • Gauge
  • Carousels

    • Carousel

Gauge

A customizable semi-circular gauge component for visualizing metrics and performance scores.

0%

Performance

Installation

npx shadcn@latest add https://chamaac.com/r/gauge.json

Props

PropTypeDefaultDescription
valuenumber70The current value to display (0-100 by default)
minnumber0Minimum value of the gauge
maxnumber100Maximum value of the gauge
sizenumber400Diameter of the gauge in pixels
gapnumber4Gap between bars in degrees
thicknessnumber10Thickness of the gauge bars in pixels
activeColorstring"bg-blue-600"Tailwind class for the active bar color
inactiveColorstring"bg-blue-100"Tailwind class for the inactive bar color
showValuebooleantrueWhether to display the value text
labelstring"Performance"Label text displayed below the value
delaynumber25Delay in milliseconds between each bar's animation