Skip to main content
Lumidot provides 20 pre-defined color variants that control the dot color and glow. All variants are defined in the COLORS constant in types.ts.

​
Using Variants

Set the variant prop to use any of the available colors: 
import { Lumidot } from 'lumidot';

<Lumidot variant="blue" pattern="all" />

​
Available Variants

​
Blue Family

blue

<Lumidot variant="blue" />
Hex: #93c5fd

sky

<Lumidot variant="sky" />
Hex: #7dd3fc

cyan

<Lumidot variant="cyan" />
Hex: #67e8f9

indigo

<Lumidot variant="indigo" />
Hex: #a5b4fc

​
Green Family

green

<Lumidot variant="green" />
Hex: #86efac

emerald

<Lumidot variant="emerald" />
Hex: #6ee7b7

teal

<Lumidot variant="teal" />
Hex: #5eead4

lime

<Lumidot variant="lime" />
Hex: #bef264

​
Pink & Purple Family

pink

<Lumidot variant="pink" />
Hex: #f9a8d4

rose

<Lumidot variant="rose" />
Hex: #fda4af

purple

<Lumidot variant="purple" />
Hex: #d8b4fe

violet

<Lumidot variant="violet" />
Hex: #c4b5fd

fuchsia

<Lumidot variant="fuchsia" />
Hex: #f0abfc

​
Warm Colors

red

<Lumidot variant="red" />
Hex: #fca5a5

orange

<Lumidot variant="orange" />
Hex: #fdba74

amber

<Lumidot variant="amber" />
Hex: #fcd34d

yellow

<Lumidot variant="yellow" />
Hex: #fde047

​
Neutrals

white

<Lumidot variant="white" />
Hex: #ffffff

black

<Lumidot variant="black" />
Hex: #000000

slate

<Lumidot variant="slate" />
Hex: #cbd5e1

​
Color Constant

All colors are defined in types.ts: 
export const COLORS = {
  amber: '#fcd34d',
  blue: '#93c5fd',
  cyan: '#67e8f9',
  emerald: '#6ee7b7',
  fuchsia: '#f0abfc',
  green: '#86efac',
  indigo: '#a5b4fc',
  lime: '#bef264',
  orange: '#fdba74',
  pink: '#f9a8d4',
  purple: '#d8b4fe',
  red: '#fca5a5',
  rose: '#fda4af',
  sky: '#7dd3fc',
  slate: '#cbd5e1',
  teal: '#5eead4',
  violet: '#c4b5fd',
  white: '#ffffff',
  black: '#000000',
  yellow: '#fde047',
} as const;

​
Type Definition

export type LumidotVariant = keyof typeof COLORS;
This creates a union type of all valid color keys, providing full TypeScript autocomplete.

​
Glow Effect

Each variant automatically includes a glow effect created by the glowShadow function in index.tsx: 
function glowShadow(glow: number, color: string): string {
  if (glow <= 0) return 'none';
  const bright = brighten(color);
  return `0 0 ${glow * 0.4}px ${color}, 0 0 ${glow}px ${bright}60`;
}
The glow consists of:
  1. Inner shadow using the base color
  2. Outer shadow using a brightened version of the color with 60% opacity

​
Brighten Function

Colors are automatically brightened for the glow effect: 
function brighten(hex: string, amount = 0.5): string {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  const lift = (c: number) =>
    Math.round(c + (255 - c) * amount)
      .toString(16)
      .padStart(2, '0');
  return `#${lift(r)}${lift(g)}${lift(b)}`;
}
This function lightens each RGB channel by 50% (default) toward white, creating a brighter version for the outer glow.

​
Customizing Glow Intensity

Control the glow intensity with the glow prop: 
<Lumidot variant="blue" glow={0} />

​
Default Variant

If no variant is specified, Lumidot defaults to blue: 
// These are equivalent
<Lumidot />
<Lumidot variant="blue" />
The default is set in the component’s props: 
const Lumidot = React.forwardRef<HTMLSpanElement, LumidotProps>(
  (
    {
      variant = 'blue',
      // ... other props
    },
    ref,
  ) => {
    const color = COLORS[variant] ?? COLORS.blue;
    // ...
  },
);

​
Combining with Patterns

Variants work with all patterns: 
<Lumidot variant="emerald" pattern="wave-lr" rows={3} cols={5} />
<Lumidot variant="fuchsia" pattern="spiral" rows={4} cols={4} />
<Lumidot variant="orange" pattern="corners-sync" rows={3} cols={3} />

Build docs developers (and LLMs) love

Get started for freeTalk to us