Skip to main content

​
Package Manager

Install Lumidot using your preferred package manager: 
npm install lumidot

​
Peer Dependencies

Lumidot requires React 18 or later. If you don’t have React installed yet: 
npm install react react-dom
Lumidot supports both React 18 and React 19. The library is marked as 'use client' and works seamlessly with Next.js App Router and other React Server Components frameworks.

​
TypeScript Setup

Lumidot is written in TypeScript and includes full type definitions out of the box. No additional @types packages are needed.

​
Type Imports

Import types alongside the component: 
import { Lumidot } from 'lumidot';
import type { LumidotProps, LumidotPattern, LumidotVariant } from 'lumidot';

const MyLoader: React.FC<{ variant: LumidotVariant }> = ({ variant }) => {
  return <Lumidot variant={variant} pattern="wave-lr" />;
};

​
Available Types

import type {
  LumidotProps,      // Component props interface
  LumidotPattern,    // Union of 36 pattern names
  LumidotVariant,    // Union of 20 color names
  LumidotDirection,  // 'ltr' | 'rtl' | 'ttb' | 'btt'
} from 'lumidot';

​
Type-Safe Patterns and Colors

Lumidot exports constants for runtime pattern and color validation: 
import { PATTERN_NAMES, COLORS } from 'lumidot';

// All 36 pattern names as a readonly array
const patterns = PATTERN_NAMES; // ['solo-center', 'solo-tl', ...]

// All 20 colors as an object with hex values
const colors = COLORS; // { amber: '#fcd34d', blue: '#93c5fd', ... }
Use PATTERN_NAMES to build pattern pickers or validation logic, and COLORS to access hex values for custom styling.

​
Framework-Specific Notes

Lumidot works out of the box with Next.js 13+ and the App Router. The component is already marked as 'use client'.
// app/page.tsx or any client component
import { Lumidot } from 'lumidot';

export default function Page() {
  return <Lumidot variant="blue" pattern="all" />;
}
If you’re using Lumidot in a Server Component file, you’ll need to either:
  1. Import it in a Client Component ('use client')
  2. Dynamically import it with next/dynamic
Works without any additional configuration:
// pages/index.tsx
import { Lumidot } from 'lumidot';

export default function Home() {
  return <Lumidot variant="indigo" />;
}
Lumidot is optimized for Vite with ESM and tree-shaking support:
// src/App.tsx
import { Lumidot } from 'lumidot';

function App() {
  return <Lumidot pattern="wave-lr" />;
}
No additional configuration needed.
Import and use directly:
// src/App.js
import { Lumidot } from 'lumidot';

function App() {
  return <Lumidot variant="cyan" />;
}
Lumidot works with Remix’s client-side rendering:
// app/routes/_index.tsx
import { Lumidot } from 'lumidot';

export default function Index() {
  return <Lumidot pattern="spiral" />;
}

​
Bundle Size

Lumidot has zero runtime dependencies beyond React:
  • Minified: ~6KB
  • Minified + Gzipped: ~2.5KB
The library supports tree-shaking, so importing only what you need keeps your bundle lean.
Lumidot includes internal CSS for animations. This is automatically bundled and does not require separate CSS imports.

​
Verification

Verify your installation by importing and rendering the component: 
import { Lumidot } from 'lumidot';

function Test() {
  return <Lumidot />;
}
If you see a blue pulsing 3x3 dot grid, you’re all set!

​
Next Steps

Quickstart

Build your first loading animation in under 2 minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us