Skeleton Component
React skeleton loading component with text, circular and rectangular variants, multi-line paragraphs and reduced-motion support — built with Tailwind CSS.
Import
1import { Skeleton } from "@neuctra/ui";Basic Usage
Three shapes cover most layouts: text, circular and rectangular.
Paragraph Placeholder
lines renders a stacked paragraph with a shorter final line.
Composed Card Placeholder
Props
All available props for the Skeleton component.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "text" | "circular" | "rectangular" | "text" | Placeholder shape |
| width | number | string | — | Explicit width (px or any CSS value) |
| height | number | string | — | Explicit height |
| lines | number | 1 | Stacked text lines (text variant) |
| animated | boolean | true | Toggle the pulse animation |
| lineClassName | string | — | Styles each individual line when variant="text" and lines > 1. |
Accessibility
- Skeletons are aria-hidden — announce loading state separately (e.g. aria-busy on the container).
- The pulse animation is disabled automatically for users with prefers-reduced-motion.
Frequently Asked Questions
How do I install and import the Skeleton component?
Install the @neuctra/ui package, then import it with: import { Skeleton } from "@neuctra/ui";
What variants and sizes does Skeleton support?
Skeleton supports variants: text, circular, rectangular. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Skeleton component accessible?
Skeleton is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.