Skip to main content
All props for the Lumidot component are optional and have sensible defaults.

​
Props Reference

​
variant
LumidotVariant
default:"blue"
Color variant for the dots. Available options: amber, blue, cyan, emerald, fuchsia, green, indigo, lime, orange, pink, purple, red, rose, sky, slate, teal, violet, white, black, yellow.
​
pattern
LumidotPattern
default:"all"
Animation pattern to display. Available patterns:Solo patterns: solo-center, solo-tl, solo-brLine patterns: line-h-top, line-h-mid, line-h-bot, line-v-left, line-v-mid, line-v-right, line-diag-1, line-diag-2Corner patterns: corners-only, corners-syncShape patterns: plus-hollow, l-tl, l-tr, l-bl, l-br, t-top, t-bot, t-left, t-rightDuo patterns: duo-h, duo-v, duo-diagFrame patterns: frame, frame-syncSparse patterns: sparse-1, sparse-2, sparse-3Wave patterns: wave-lr, wave-rl, wave-tb, wave-btOther: spiral, all
​
rows
number
default:"3"
Number of rows in the dot grid. Must be a positive integer.
​
cols
number
default:"3"
Number of columns in the dot grid. Must be a positive integer.
​
glow
number
default:"8"
Glow intensity for active dots in pixels. Set to 0 to disable glow effect.
​
scale
number
default:"1"
Scale multiplier for the entire component size. The base size is 20px, so scale={2} would result in a 40px component.
​
duration
number
default:"0.7"
Animation duration in seconds for wave-based animations.
​
direction
LumidotDirection
default:"ltr"
Direction of wave animations. Options:
  • ltr - Left to right diagonal
  • rtl - Right to left diagonal
  • ttb - Top to bottom diagonal
  • btt - Bottom to top diagonal
Note: Wave patterns (wave-lr, wave-rl, wave-tb, wave-bt) have their own directional behavior that overrides this prop.
​
className
string
Custom CSS class name to apply to the root element.
​
style
CSSProperties
Custom inline styles to apply to the root element (React CSSProperties object).
​
testId
string
Test ID for testing frameworks, applied as data-testid attribute.

​
Examples

​
Minimal Configuration

<Lumidot />
Uses all defaults: blue color, all pattern, 3x3 grid, glow of 8, scale of 1, 0.7s duration, ltr direction.

​
Custom Colors and Pattern

<Lumidot variant="emerald" pattern="spiral" />

​
Large Grid with Custom Timing

<Lumidot
  rows={7}
  cols={7}
  duration={1.5}
  pattern="wave-lr"
/>

​
Styled with CSS

<Lumidot
  variant="purple"
  className="my-loader"
  style={{ margin: '20px auto' }}
/>

​
High Intensity Glow

<Lumidot variant="cyan" glow={20} scale={2} />

​
No Glow Effect

<Lumidot variant="slate" glow={0} />

Build docs developers (and LLMs) love

Get started for freeTalk to us