Skeleton
Temporarily represents content structure while data is loading.
- Status
- Beta
- Distribution
- Source via shadcn
Design
Functional preview
Loading functional preview…
Explore anatomy and visual states
Anatomy
- Placeholder shape
Variants and states
circlerectangletext
Usage
When to use
- the final structure is known and loading may be perceptible.
When not to use
- the operation is immediate or no predictable structure can be represented.
React composition
import { Skeleton } from "@/components/ui/skeleton"
<div role="status" aria-busy="true" aria-label="Carregando perfil">
<Skeleton variant="circle" />
<Skeleton variant="text" />
</div>Implementation
Installation
Configure the namespace once in the React integration guide.
npx shadcn@latest add @tis/skeletonpnpm dlx shadcn@latest add @tis/skeletonyarn dlx shadcn@latest add @tis/skeletonbunx --bun shadcn@latest add @tis/skeletonPublic contract
- Registry item
@tis/skeleton- Distribution
- Source copied into the application
- Status
- Beta
Technical architecture
- Provider
- React presentation
- Provider role
- Native or composition
- Behavioral architecture
- Base UI
- CSS
ds-tis/css
Accessibility
Semantics and behavior
Keep Skeleton silent with aria-hidden and announce loading once on the containing region.
Consumer responsibility
- provide contextual accessible names and descriptions;
- preserve keyboard behavior, focus visibility, and semantic HTML;
- test real content, flow, and contrast in the application.
Validation evidence
Installed in the permanent React/Vite consumer and covered by production build, browser, responsive, and Axe checks.