Gauge Chart Components

Dev Design Library indexes 27 gauge chart components from 17 open-source UI libraries, with the most coming from Amicro Micro Transitions, React Spectrum, Kokonut UI, Arc Library and ReactFrame. Each one links to its page with the source code, a live preview where available, the library license and the install command. Gauge chart components belong to the Data display group.

• Slosh GaugeReact Bits · ReactTank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it…
• MeterReact Spectrum · ReactMeters are visual representations of a quantity or an achievement. Their progress is determined by user actions…
• Segmented Arc MeterAmicro Micro Transitions · ReactStepped 4-bar discrete vertical gauge with percentage readout.
• AI Context MeterKokonut UI · ReactHow full the context window is, as a ring in the prompt footer that opens a breakdown by source and compacts when it…
• Usage MeterSpectrum UI · ReactA context-window meter with token counts and estimated cost.
• MeterPanel UI · React NativeA measurement on a fixed scale, coloured by where it falls.
• LCD Meteraudiocn · ReactA recorder-style level meter on an LCD Display's screen: block segments in the display's ink that light whole, a held…
• GaugeWatermelon UI · React
• GaugeGauge UI · ReactComposable SVG gauge primitives: track, arc, zones, ticks, tick fills, labels, needle, hub, dot, tooltip and value…
• GaugeArc Library · ReactShow a value against a known range.
• GaugeUI Lab · ReactTicks light up as the value sweeps in, and a peak marker holds where it was before falling.
• Cosine Similarity MeterLocalMode · ReactA display card showing a cosine similarity (0–1) as a large numeric value with a human-readable bucket label (Very…
• Confidence BarHalaska UI · React
• MeterMetal UI · React + SwiftUIA level in a range as a row of LED segments coloured by position (green, amber, red); a change sweeps segment by…
• MeterSpaceUI · ReactDisplays a visual gauge bar showing a quantity within a known range, such as battery level, disk capacity, or password…
• Liquid GaugeLiquefy UI · React
• MeterReactFrame · ReactA meter for a value within a known range: bar, semicircle gauge or segmented variants with threshold zones, animated…
• Tailwind MeterReact Spectrum · React
• Mono Rounded Gauge ArcAmicro Micro Transitions · React
• Liquid GaugeKokonut UI · ReactA usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation.
• Web Range MeterPanel UI · React Native
• Usage meterArc Library · ReactShow what fills an allowance and how close it is to the limit.
• Progress Circle BarsReactFrame · ReactA circular progress indicator with ring, gauge, and dashes arc styles, scroll-triggered count-up animation, color…
• Vanilla MeterReact Spectrum · React
• Mono Rounded Meter ChartAmicro Micro Transitions · React
• Mono Rounded Radial Gauge ChartAmicro Micro Transitions · React
• Server GaugeAmicro Micro Transitions · React

Libraries with gauge chart components

• Amicro Micro Transitions
• React Spectrum
• Kokonut UI
• Arc Library
• ReactFrame

Related categories

• Tailwind CSS Gauge Chart Components
• Animated Gauge Chart Components
• Data Display Components
• Card Components
• Chart Components
• Table Components
• Avatar Components
• List Components
• Stat Components
• Calendar Components
• Accordion Components
• Data Table Components
• Carousel Components
• Collapsible Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components