Components

Skeleton

Loading placeholder: a soft surface block with a slow light sweep gliding across on a 1.8s loop.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add skeleton

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Skeleton } from "@lumora/ui/components/skeleton";
// or from the barrel:
import { Skeleton } from "@lumora/ui";

Props worth knowing

Size the single block with className, or pass lines for a paragraph of staggered-width rows. Purely decorative — hidden from assistive tech, and a static block under reduced motion. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.