Skip to main content

​
Grid Dimensions

By default, Lumidot creates a 3x3 grid. You can customize the grid dimensions using the rows and cols props.

​
Wide Grids

Create wide loading indicators with more columns than rows: 
import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={1} 
      cols={5} 
      pattern="wave-lr" 
      variant="purple" 
    />
  );
}

​
Tall Grids

Create tall loading indicators with more rows than columns: 
import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={5} 
      cols={1} 
      pattern="wave-tb" 
      variant="rose" 
    />
  );
}

​
Large Square Grids

Create larger square grids for more complex patterns: 
import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={5} 
      cols={5} 
      pattern="spiral" 
      variant="fuchsia" 
    />
  );
}

​
Rectangular Grids

Combine custom dimensions with different patterns: 
import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={4} 
      cols={6} 
      pattern="line-diag-1" 
      variant="sky" 
    />
  );
}

​
Pattern Behavior with Custom Grids

Some patterns adapt intelligently to grid dimensions: 
import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={5} 
      cols={5} 
      pattern="solo-center" 
      variant="blue" 
    />
  );
}

​
Combining Grid Size with Scale

Adjust both dimensions and visual scale for precise sizing: 
import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={8} 
      cols={8} 
      pattern="frame" 
      variant="cyan" 
      scale={0.8}
    />
  );
}