React Attitude Indicator
The most recognizable instrument in the cockpit, driven by data: an artificial horizon showing pitch and roll, with a pitch ladder, a roll scale and pointer at the top, the fixed amber aircraft symbol, and a mono pitch/roll/heading readout. Sky and ground stay flight-standard blue and brown so it reads as an ADI in any theme — a deliberate exception to the token palette, because instrument conventions override brand here.
PITCH +0.0°ROLL R0.0°HDG 090°
Live — descending turnPITCH +0.0°ROLL R0.0°
Straight & levelPITCH +15.0°ROLL L30.0°
Climbing left bankThe left instrument flies a live maneuver — the horizon pitches and banks against the fixed aircraft symbol, exactly like an ADI.
Installation
npx shadcn@latest add "http://localhost:3000/registry/attitude-indicator.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pitch | number | 0 | Degrees, + = nose up |
| roll | number | 0 | Degrees, + = right bank |
| heading | number | — | Optional heading readout (deg) |
| size | number | 220 | Instrument diameter in px |
| label | string | — | Caption under the readout |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.