Data Display·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Skeleton } from "@sisyphos-ui/react";

export const Loading = () => <Skeleton width="60%" height={16} />;

Animation modes

`animation` supports `shimmer` (default), `pulse`, and `none` for reduced motion.

example.tsxtsx

animation="shimmer" (default)

animation="pulse"

animation="none" (static)

API

Prop	Type	Default	Description
shape	"rectangular" \| "circular" \| "text"	"rectangular"	Placeholder shape; `text` defaults to a `1em`-tall line.
animation	"shimmer" \| "pulse" \| "none"	"shimmer"	Loading animation style.
width	number \| string	—	CSS width (numbers are treated as px).
height	number \| string	—	CSS height (numbers are treated as px).
radius	number \| string	—	Corner radius; ignored when `shape` is `circular`.
children	ReactNode	—	When provided, the skeleton wraps the children and derives its dimensions from them if `width`/`height` are omitted.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

The root is aria-hidden="true" — the placeholder is completely invisible to assistive technology.
Wrapped children render inside the hidden ghost span only to size the skeleton; they are never announced while loading.
No role or live region is added — announce the loading state elsewhere (e.g. a Spinner or aria-busy on the containing region).

Need more?View on npm →