XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Gauge

Previous: FrameNext: Grid

A semicircular dial that shows a value within a range.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import { Gauge } from "xiod-ui/gauge";

API Reference

Detailed documentation of properties and options.

Gauge

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
format
((value: number) => string)
–

Formats the value for the centre text and for screen readers, such as (v) => ${v}%``.

labels
Partial<GaugeLabels>
–
FrameGrid

Replaces the built-in text for this instance. See LabelsProvider to change it everywhere.

max
number
100

The highest value. A max at or below min falls back to min + 100.

min
number
0

The lowest value.

showValue
boolean
true

Whether the value is shown in the centre. Ignored when children is set.

size
number
120

The diameter of the gauge, in pixels.

strokeWidth
number
12

The width of the arc, in pixels.

value
number
0

The value shown, from min to max. Values outside are clamped.