Content & statusBrick 0.1.2

Skeleton

Skeleton preserves expected content geometry while an application-owned loading operation is incomplete.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Skeleton is the right part

Use it when

Use Skeleton when the final layout is known and preserving its geometry reduces disruptive shifts during a short content load.

Choose another path when

Do not use it as generic decoration, progress for a known-duration operation, an error state, or the only announcement for an updating region.

Installation and imports

tsx

import { Skeleton } from "@flowstack-ui/brick/skeleton";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/skeleton.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Skeleton loading={isLoading} variant="rounded">
  <article>Loaded content</article>
</Skeleton>

Visual recipes and states

Text is one font-height line, circular is square and round, rectangular has sharp corners, and rounded uses the surface radius. Pulse changes opacity, wave moves a highlight, and none is static. Multi-line text shortens its last line. Loaded content has no placeholder paint.

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are Skeleton, SkeletonProps, SkeletonVariant, and SkeletonAnimation.

Prop	Values	Default
`variant`	`text`, `circular`, `rectangular`, `rounded`	`text`
`animation`	`pulse`, `wave`, `none`	`pulse`
`loading`	`boolean`	`true`
`lines`	`number`	`1`
`width` / `height`	CSS length or number	optional

Native span attributes, children, class, style, slot, and ref are supported.

Shared responsibility

Accessibility

Loading Skeleton is aria-hidden and has no status role or label. Mark the owning region aria-busy and provide application status copy when an announcement is needed. Reduced-motion users receive static placeholders; forced colors retains geometry.

Responsive behavior

The default width follows its container and never exceeds it. Explicit CSS lengths remain consumer-owned. Multi-line placeholders use logical dimensions and require no RTL mirroring.

Stable visual contract

Styling and tokens

Customization

Prefer width, height, and supported variables. Match the expected final shape closely so loading does not cause a layout shift.

Tokens and CSS hooks

The stable class is .brick-skeleton; data hooks are data-variant, data-animation, data-loading, data-lines, and data-slot. Public tokens are --brick-skeleton-background, --brick-skeleton-highlight, --brick-skeleton-width, --brick-skeleton-height, and --brick-skeleton-radius.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground