Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Gauge Cluster Features Block for Solid

Three semicircle gauges in one framed band, driven by a single "Simulate load" slider: CPU, memory and queue wait, each with a needle, an arc, a reading and a state.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An instrument cluster for Solid with Ark UI. Three semicircle gauges (CPU, memory and queue wait) sit side by side in one hairline frame with + marks on its corners, divided by hairlines. Each has tick marks, a filled arc, a needle, a big reading, a state badge and a sentence about how it behaves. One "Simulate load" slider in the header drives all three through a CSS variable, so dragging it shows which resource gives out first. On a phone the gauges stack. The page's rails and top rule come from the Guides spine. It's built from Slider, Badge and Guides, with SVG for the dials and your theme's tokens for every colour. For capacity planners, infrastructure pages and any numbers that tell a better story as dials.

FAQ

How do I change the gauges?

Edit GAUGES at the top of the file: each has a title, a unit, a base reading at no load, a rise across the whole range, a max for the dial's far end, a sentence, and knee for a curve that stays flat and climbs late. The arc, needle, reading and state all read from the same helper, so they always agree.

How are Healthy, Busy and Over decided?

From how far round the dial a reading is: below 60 percent is Healthy, 60 to 84 is Busy and 85 or more is Over. Over is a filled badge and the other two are outlined, and the word is always there, so colour is never the only signal.

How does the slider drive the dials?

The slider's value is state; each gauge column gets its dial position as a CSS variable, and the arc's fill and the needle's rotation are CSS that read it, with a short transition. Under reduced motion the transitions are off and the needles jump.

Are the gauges accessible?

The dials are drawings and are hidden from assistive technology. Each gauge is a list item with a heading, its reading and its state in text, and the slider is named "Simulate load" and reads its value as "60 percent of peak traffic". When you let go of the slider, one polite live region announces all three readings.

How does it fit on a phone?

The gauges stack one per row, divided by hairlines, with a shorter dial, and the slider sits full width under the header. Nothing scrolls sideways at 320 pixels.

Do the dials mirror in right-to-left?

No: a dial's sweep is read as a measurement, so it keeps its direction, while the text, the badge and the slider follow the page's direction. The readings are wrapped so their units keep their order.

All 170 features blocks