Loader

Feedback

A full loading state with a spinner or skeleton pattern.

The Loader composes an optional label with a spinner, or a ready-made skeleton card. Drop it in place of content that is still loading.

npx shadcn@latest add loader

Spinner loader

A centered spinner with an optional label.

Preview

Live

Loading workspace...

tsx

1<Loader label="Loading workspace..." />

A skeleton card that mirrors the shape of the content loading behind it.

Preview

Live

Loading workspace...

tsx

1<Loader variant="skeleton" />

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
variant	"spinner" \| "skeleton"= "spinner"	The loading pattern to render.
label	string	Supporting text shown under the spinner variant.
className	string	Custom classes for the loader root.