Components

Skeleton

A loading placeholder shaped like the content: a quiet grey block or a few text lines that pulse gently, and hold still under reduced motion.

Usage

Use it for:

  • Content that takes more than ~300ms and has a known shape.
  • Table rows while data loads (DataTable does this).

Avoid it when:

  • Unknown layout or a short wait: use Spinner.
  • Long operations with progress: use Progress.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Card placeholder

Loading account

Shapes

API Reference

Skeleton

A <div> (aria-hidden); other <div> props are forwarded.

PropTypeDefault
width
number | string
"100%"
height
number | string
20px (12px per line)
radius
"sm""md""lg""full"
"sm"
lines
number
style
CSSProperties
className
string

Accessibility

No keyboard interaction of its own.

ARIA and semantics:

  • Skeletons are aria-hidden: mark the loading region with aria-busy="true" and add a short text status (role="status") for screen readers.
  • The pulse stops under prefers-reduced-motion: reduce.
© 2026 Motion. Internal documentation.