ComponentsFeedback
Skeleton
A placeholder shown while content is loading.
Overview
A skeleton is a low-fidelity placeholder that occupies the shape of content while it loads, reducing layout shift and signalling progress.
$ npx morpha-ui add skeletonExamples
Card placeholder
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add skeleton. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add skeletonAPI Reference
Prop
Type
Accessibility
- Mark purely decorative placeholders with
aria-hiddenso they aren't announced. - Communicate the loading state to assistive tech elsewhere (e.g.
aria-busyon the region).