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

Dot Matrix

Previous: DialogNext: Draggable

An animated grid of dots, for loading states and decorative displays.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import { DotMatrix } from "xiod-ui/dot-matrix";

API Reference

Detailed documentation of properties and options.

DotMatrix

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
autoplay
boolean
true

Whether the animation plays on its own. Animations never play when the user prefers reduced motion.

bloom
boolean
DialogDraggable
true

Whether lit dots glow.

bloomIntensity
number
1.8

How far the glow spreads. Higher values give a softer, wider glow.

color
string
currentColor

The colour of lit dots, as a CSS colour.

colorOff
string
var(--muted-foreground)

The colour of unlit dots, as a CSS colour.

colorPreset
"solid"|"sunset"|"ocean"|"neon"|"aurora"|"fire"|"prism"
solid

A gradient to colour the lit dots with. solid uses color.

cols
number
5

The number of columns of dots.

decorative
boolean
false

Whether the matrix is decoration only, such as an ornament next to text that already says what is happening. Screen readers then skip it.

dotSize
number
8

The size of each dot, in pixels.

fps
number
12

How many custom frames to show per second.

frames
number[][][]
–

Your own animation for animation mode: a list of frames, each one array per row of brightness values from 0 to 1. Takes the place of preset.

gap
number
3

The space between dots, in pixels.

halo
boolean
false

Whether to add a soft glow behind the whole matrix.

isPlaying
boolean
true

Whether the animation is playing. Set it to false to pause.

labels
Partial<DotMatrixLabels>
–

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

levels
number[]
–

The height of each column in vu mode, from 0 to 1, left to right.

loop
boolean
true

Whether custom frames start over after the last one. When false, the animation stops on the last frame.

mode
"animation"|"static"|"vu"
animation

What the dots show: an animation (a preset or your own frames), a fixed pattern, or level bars from levels.

onFrame
((index: number) => void)
–

Called with the index of each custom frame as it is shown.

pattern
number[][] | boolean[][]
–

The dots to light in static mode, one array per row. Each value is true/false, or a brightness from 0 to 1.

preset
"none"|"ripple"|"spiral"|"snake"|"wave"|"wave-vertical"|"pulse"|"diagonal"|"diagonal-reverse"|"rotor"|"columns-flux"|"helix"|"infinity"|"heart-pulse"|"orbit"|"matrix-rain"|"sine-wave"|"crt-glide"|"twin-orbit"|"rung-shift"|"lunar-breath"|"nova-wheel"|"prism-bloom"|"half-helix"|"honey-gate"|"spiral-lattice"|"altitude-wave"|"glyph-cluster"|"rail-scan"|"halo-drift"
ripple

The built-in animation to play in animation mode when no frames are given. none shows every dot lit.

rows
number
5

The number of rows of dots.

shape
"circle"|"square"|"diamond"|"heart"
circle

The shape of each dot.

speed
number
1

How fast a preset animation plays, as a multiple of its normal speed.