Grid Loader

Installation

pnpm dlx shadcn add @smoothui/grid-loader

npx shadcn@latest add @smoothui/grid-loader

yarn dlx shadcn add @smoothui/grid-loader

bunx shadcn add @smoothui/grid-loader

Features

• 60+ preset patterns: solo, lines, waves, corners, shapes, stripes, spirals, and more
• Three animation modes: pulse, sequence, stagger
• Five color presets plus custom CSS color support
• Four size presets plus custom pixel values
• Glow effect that scales with size
• Respects reduced motion preferences
• Accessible with proper ARIA attributes

Props

Animation Modes

Pulse (default)

All active cells glow together in a breathing animation:

<GridLoader pattern="plus-hollow" mode="pulse" />

Stagger

Active cells reveal one-by-one in reading order:

<GridLoader pattern="frame" mode="stagger" />

Sequence

Cycles through an array of patterns:

<GridLoader
  mode="sequence"
  sequence={["corners-only", "cross", "frame"]}
/>

Preset Patterns

Solo (single cell)

solo-center, solo-tl, solo-tr, solo-bl, solo-br

Lines

line-h-top, line-h-mid, line-h-bot, line-v-left, line-v-mid, line-v-right, line-diag-1, line-diag-2

Waves

wave-lr, wave-rl, wave-tb, wave-bt

Diagonal Quadrants

diagonal-tl, diagonal-tr, diagonal-bl, diagonal-br

Corners

corners-only, corners-sync, corners

Plus & Cross

plus-hollow, plus-full, cross

Shapes

x-shape, diamond, checkerboard

L-shapes

L-tl, L-tr, L-bl, L-br

T-shapes

T-top, T-bot, T-left, T-right

Stripes

stripes-h, stripes-v, rows-alt

Spirals

spiral-cw, spiral-ccw

Snake

snake, snake-rev

Rain

rain, rain-rev

Duo

duo-h, duo-v, duo-diag

Frame & Border

frame, frame-sync, border, ripple-out, ripple-in

Effects

waterfall, breathing, heartbeat, twinkle, sparkle, chaos

Edge

edge-cw

Sparse

sparse-1, sparse-2, sparse-3

Custom Patterns

Pass a 3x3 matrix of 0s and 1s for custom patterns:

<GridLoader
  pattern={[
    [1, 0, 1],
    [0, 1, 0],
    [1, 0, 1],
  ]}
/>

Colors

Five preset colors: white, red, blue, green, amber

Or pass any CSS color value:

<GridLoader color="#a855f7" />
<GridLoader color="rgb(168, 85, 247)" />

Sizes

Four preset sizes: sm (24px), md (32px), lg (48px), xl (64px)

Or pass a number for exact pixel value:

<GridLoader size={40} />