Skip to main content

​
Basic Usage

The simplest way to use Lumidot is to import and render it with default props: 
import { Lumidot } from 'lumidot';

function App() {
  return <Lumidot />;
}
This renders a 3x3 blue dot grid with the all pattern and a continuous wave animation.

​
Choosing Patterns

Lumidot includes 36 built-in patterns. Here are some popular ones to get started:
1

Wave Animations

Wave patterns create a cascading pulse effect across the grid:
<Lumidot pattern="wave-lr" />  {/* Left to right */}
<Lumidot pattern="wave-rl" />  {/* Right to left */}
<Lumidot pattern="wave-tb" />  {/* Top to bottom */}
<Lumidot pattern="wave-bt" />  {/* Bottom to top */}
2

Geometric Patterns

Static or sequenced geometric layouts:
<Lumidot pattern="frame" />       {/* Perimeter outline */}
<Lumidot pattern="spiral" />      {/* Rotating spiral */}
<Lumidot pattern="corners-only" /> {/* Four corners sequence */}
<Lumidot pattern="plus-hollow" />  {/* Plus sign edges */}
3

Minimal Patterns

Perfect for subtle indicators:
<Lumidot pattern="solo-center" /> {/* Single center dot */}
<Lumidot pattern="duo-h" />       {/* Two horizontal dots */}
<Lumidot pattern="line-h-mid" />  {/* Horizontal center line */}
Browse all 36 patterns with live previews at lumidot.dev

​
Changing Colors

Lumidot provides 20 pre-configured color variants: 
<Lumidot variant="blue" />

​
Available Variants

amber • black • blue • cyan • emerald • fuchsia • green • indigo • lime • orange • pink • purple • red • rose • sky • slate • teal • violet • white • yellow

​
Customizing Size

1

Using the scale prop

The scale prop multiplies the base size (20px):
<Lumidot scale={0.5} /> {/* 10px */}
<Lumidot scale={1} />   {/* 20px (default) */}
<Lumidot scale={2} />   {/* 40px */}
<Lumidot scale={3} />   {/* 60px */}
2

Adjusting the grid

Control the number of rows and columns:
<Lumidot rows={3} cols={3} /> {/* 3x3 (default) */}
<Lumidot rows={5} cols={5} /> {/* 5x5 */}
<Lumidot rows={1} cols={5} /> {/* 1x5 horizontal bar */}
<Lumidot rows={7} cols={1} /> {/* 7x1 vertical bar */}
Grid dimensions affect pattern behavior. Some patterns (like frame) work best with larger grids (5x5 or more).

​
Animation Control

​
Duration

Control how fast the wave animation cycles: 
<Lumidot duration={0.5} /> {/* Fast */}
<Lumidot duration={0.7} /> {/* Default */}
<Lumidot duration={1.5} /> {/* Slow */}

​
Direction

Set the wave propagation direction: 
<Lumidot direction="ltr" /> {/* Left to right (default) */}
<Lumidot direction="rtl" /> {/* Right to left */}
<Lumidot direction="ttb" /> {/* Top to bottom */}
<Lumidot direction="btt" /> {/* Bottom to top */}
The direction prop only affects wave-mode patterns. Sequence patterns like spiral and corners-only use predefined frame orders.

​
Glow Intensity

Adjust the glow/shadow effect around dots: 
<Lumidot glow={0} />  {/* No glow */}
<Lumidot glow={8} />  {/* Default glow */}
<Lumidot glow={16} /> {/* Strong glow */}

​
Real-World Examples

import { Lumidot } from 'lumidot';
import { useState } from 'react';

function LoadingButton() {
  const [loading, setLoading] = useState(false);

  return (
    <button disabled={loading} onClick={() => setLoading(true)}>
      {loading ? (
        <Lumidot pattern="solo-center" scale={0.8} variant="white" />
      ) : (
        'Submit'
      )}
    </button>
  );
}

​
TypeScript Usage

Lumidot includes full TypeScript support: 
import { Lumidot } from 'lumidot';
import type { LumidotProps, LumidotPattern, LumidotVariant } from 'lumidot';

// Type-safe props
const props: LumidotProps = {
  variant: 'blue',
  pattern: 'wave-lr',
  rows: 5,
  cols: 5,
};

// Type-safe pattern array
const patterns: LumidotPattern[] = ['wave-lr', 'spiral', 'frame'];

// Type-safe color picker
function ColorPicker({ onSelect }: { onSelect: (v: LumidotVariant) => void }) {
  return (
    <select onChange={(e) => onSelect(e.target.value as LumidotVariant)}>
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      {/* ... */}
    </select>
  );
}

​
Custom Styling

Lumidot supports className and style props for layout customization: 
import { Lumidot } from 'lumidot';

function StyledLoader() {
  return (
    <Lumidot
      variant="purple"
      className="my-loader"
      style={{
        margin: '2rem auto',
        display: 'block',
      }}
    />
  );
}
The style prop applies to the container element, not individual dots. For dot-level customization, use CSS custom properties or wrap the component in a styled container.

​
Accessibility

Lumidot includes built-in accessibility features:
  • role="status" for screen readers
  • aria-label="Loading" for context
  • Respects prefers-reduced-motion for users who prefer reduced animation
// Automatically accessible
<Lumidot />

// Add custom test ID for testing
<Lumidot testId="page-loader" />

​
Next Steps

API Reference

Complete prop documentation and type definitions

Pattern Gallery

Explore all 36 patterns with live examples

Examples

Production-ready recipes and integration guides

GitHub

View source code and contribute

Build docs developers (and LLMs) love

Get started for freeTalk to us