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

Orb

Previous: Option PickerNext: Pagination

An animated orb that shows what an AI assistant is doing, such as listening or working.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import { Orb, OrbBadge, OrbLabel } from "xiod-ui/orb";

Anatomy

1<Orb />2<OrbBadge>3  <Orb />4  <OrbLabel />5</OrbBadge>

API Reference

Detailed documentation of properties and options.

Orb

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
aria-label
string
–

The name screen readers announce. Defaults to a label for the state, such as "Thinking…".

color
string
Option PickerPagination
–

The colour of the dots, as a hex (#f60, #ff6600) or rgb() colour with comma-separated values. The dots are neutral when unset.

glow
"none"|"intense"|"subtle"
none

How strongly the orb glows in its own colour.

intent
"default"|"info"|"success"|"warning"|"destructive"|"secondary"|"primary"
default

The theme colour of the glow around the orb. The dots stay neutral unless you set color.

interactive
boolean
false

Whether the orb speeds up while the pointer is over it.

labels
Partial<OrbLabels>
–

Replaces the built-in text (the name read for each state) for this instance. See LabelsProvider to change it everywhere.

paused
boolean
false

Whether the animation is paused. It also stays still when the user prefers reduced motion.

pixelSize
number
–

The orb's width and height in pixels. Takes precedence over size.

size
"lg"|"md"|"sm"|"2xl"|"xl"|"xs"
lg

The size of the component.

speed
number
1

How fast the orb animates, as a multiple of its normal speed.

state
"thinking"|"searching"|"spiral"|"pulse"|"helix"|"matrix"|"processing"|"spark"|"quantum"|"supernova"|"working"|"solving"|"listening"|"composing"|"shaping"|"pulsing"|"vortex"|"atom"|"radar"|"galaxy"|"torus"|"network"|"analyzing"|"beacon"|"swarm"|"nucleus"|"dna"|"sonar"|"nebula"|"donut"|"ring_torus"|"cube"|"constellation"|"nodes"|"burst"
working

What the orb is doing, which picks its animation. Some names share an animation, such as thinking and working.

theme
"auto"|"dark"|"light"
auto

Whether the orb is drawn for a dark or light background. auto follows the nearest dark or light class or data-theme, then the system setting.

variant
"default"|"diamond"|"expressive"|"sharp"|"ring"|"classic"|"cross"
default

The visual style of the component.

OrbBadge

Accepts render, plus every native <div> attribute.

OrbLabel

Accepts render, plus every native <span> attribute.