Skeleton

An unstyled placeholder component for displaying loading states.

Build fully custom loading placeholders with complete control over shape, size, and animation.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Skeleton with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Built-in shape, width, height, size, and borderRadius props for common placeholder layouts
Configurable animation with wave or none modes
size prop sets both width and height simultaneously for square and circle shapes

Usage#

import { Skeleton } from 'primereact/skeleton';

<Skeleton />

Behavior#

Polymorphic Rendering#

Use as to change the rendered HTML element.

<Skeleton as="span" width="5rem" />

Default element: div.

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

Skeleton#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SkeletonInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SkeletonInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SkeletonInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SkeletonPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SkeletonInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`shape`	`"circle"` \| `"rectangle"`	`rectangle`
Shape of the element.
`size`	`string`	—
Size of the Circle or Square.
`width`	`string`	`100%`
Width of the element.
`height`	`string`	`1rem`
Height of the element.
`borderRadius`	`string`	—
Border radius of the element, defaults to value from theme.
`animation`	`"none"` \| `"wave"`	`wave`
Type of the animation.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"skeleton"`
`data-part`	`"root"`

Defines passthrough(pt) options of Skeleton component.

label	type	description
root	SkeletonPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Skeleton uses aria-hidden="true" so it is ignored by screen readers. When multiple skeletons are grouped inside a container, aria-busy="true" can be added on the container element to indicate the loading process.

Keyboard Support#

Component does not include any interactive elements.