Skeleton

Shimmer placeholders for tables, charts, and stat cards.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Shimmer (radii)

Table row

Stat card

Chart block

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Shimmer, StatCardSkeleton, TableRowSkeleton } from "@payglocal_ui/flux-ui";

Example

<StatCardSkeleton />
<TableRowSkeleton cols={4} />

// DataTable does NOT use TableRowSkeleton — it builds its loading rows
// from its own columns, so each placeholder cell carries that column's
// width, alignment and sticky classes and lines up under its header.
// A generic "n cells" row came up short against a table with a greedy
// spacer column, which read as a column missing while loading.
// TableRowSkeleton stays for a hand-rolled table outside DataTable.