Skeleton
FeedbackShimmer placeholder for content loading states.
Animated shimmer rectangle or circle. Can wrap children to overlay the shimmer on top of the actual content during loading states. Use animate={false} for a static gray placeholder.
Usage
import { Skeleton } from "nosible-ux"
export default function Example() {
return <Skeleton width={200} height={20} />
}Examples
Content placeholders
Overlay on content
Signal matched
Accessibility
aria-hidden="true" — skeletons are purely presentational. Announce loading state via a separate aria-live region or role="status" element.
Props
| Name | Type | Default | Description |
|---|---|---|---|
animate | boolean | undefined | true | When false, disables the shimmer animation and renders a static placeholder. |
children | ReactNode | — | When provided, overlays the skeleton on top of children while loading. |
circle | boolean | undefined | false | When true, renders as a square with equal width and height. |
height | number | undefined | — | Height of the skeleton in pixels. |
width | string | number | undefined | — | Width of the skeleton. Number is interpreted as pixels, string is used as-is. |