Lattice Loader
An agent status row: a small lattice of cells brightening in a diagonal wave, the current task, and a live stopwatch. Pure CSS animation.
- Category: React Loading, Progress and Toast Components
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Lattice Loader
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
cells | number | 4 | |
running | boolean | true |
About Lattice Loader
Lattice Loader is a status line for background work: a small lattice of cells brightens in a diagonal wave beside the current task and a live stopwatch. It says what is happening and for how long.
Lattice Loader is a feedback component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Lattice Loader
- AI agents working through tasks.
- Indexing and embedding jobs.
- Imports and exports.
- Build and deploy progress.
How it works
The wave is pure CSS animation with staggered delays, so it costs almost nothing. The row is a status role, the stopwatch uses tabular figures, and reduced motion holds the lattice still.
State changes are announced through live regions or the right ARIA roles, so screen-reader users hear what sighted users see. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Lattice Loader
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change running, cells live, and the Code tab updates to match, so the snippet you copy already carries your values.
- label (string).
- cells (number, default 4).
- running (boolean, default true).
Goes well with Lattice Loader
These feedback pieces share its tokens and motion language, so they sit together on one page without clashing.
- Progress: Animated React progress bars and rings on springs, with an indeterminate sweep
- Loader: Four quiet React loaders, dots, bars, orbit and pulse, that announce themselves
- Status Badge: A React status badge that morphs between states with a pulsing live dot
- Skeleton: React skeleton loaders with a soft sweep and a blur crossfade to real content
- Alert: Animated React alerts for info, success, warning and error that collapse smoothly
Install Lattice Loader
npx shadcn@latest add https://charcoalui.com/r/lattice-loader.jsonLattice Loader is free and MIT licensed. The command copies lattice-loader.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Lattice Loader?
- Run npx shadcn@latest add https://charcoalui.com/r/lattice-loader.json. The shadcn CLI copies lattice-loader.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Lattice Loader free for commercial use?
- Yes. Lattice Loader is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Lattice Loader work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Lattice Loader?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Lattice Loader's props and source and get_install_command returns the exact command.