Skeleton
Skeletons reserve space for loading content and reduce layout shift in product surfaces.
Overview and decision boundary
Use Skeleton to reserve space for content while data loads.
Do not show skeletons after data has failed; switch to an error or empty state.
Preview
import { Skeleton } from '@nerio-ui/ui';<Skeleton />Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add skeletonimport { Skeleton } from '@nerio-ui/ui';Usage
import { Skeleton } from '@nerio-ui/ui';<Skeleton />Variants
| Variant | Purpose |
|---|---|
Block | Use repeated blocks to mirror the final content rhythm. |
Anatomy
| Slot | Purpose |
|---|---|
skeleton | Skeleton slot exposed through data-slot="skeleton". |
States
| State | Purpose |
|---|---|
Loading | Keeps layout stable until real content replaces it. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Skeleton is hidden from assistive technology by default.
- Pair loading regions with an accessible status when the wait is meaningful.
- Reserve stable dimensions to avoid layout shift.
API
| Prop | Purpose |
|---|---|
className | Extends the component root while preserving Nerio tokenized defaults. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | skeleton installs 6 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | None. |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Skeleton to reserve space for content while data loads.
Do / do not
Do
Match the approximate dimensions of the content that will load.
Do not
Do not show skeletons after data has failed; switch to an error or empty state.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-skeleton-height | Public customization point for this component contract. |
--n-skeleton-duration | Public customization point for this component contract. |
--n-easing-standard | Public customization point for this component contract. |
--n-radius-md | Public customization point for this component contract. |