# Skeleton
A shimmering placeholder in the shape of content that is still loading. Screen readers skip it, so mark the region that is loading with `aria-busy` while it shows. With reduced motion it is a flat fill that pulses instead of shimmering.
```tsx
import { Skeleton } from "@/components/ouro/skeleton/skeleton";
```
## Example
```tsx
```
## Use instead when
- Use `Spinner` instead for a wait with no layout to hold, and `Progress` when you know how far along the work is.
## Props
Type: `SkeletonProps`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | | Layout only: size, margins and placement (`h-32`, `w-1/2`, `size-12`). The color and corners come from the theme and `shape`. |
| `ref` | `Ref` | | Reaches the rendered element. |
| `shape` | `"text" \| "circle" \| "rect"` | `"rect"` | The outline of what is loading: `rect` for a block such as an image or a card, `text` for a line of text, `circle` for an avatar. Size it with layout classes: `className="h-32"`, `className="w-1/2"`, `className="size-12"`. |
## Native attributes
Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page.
## Don't use
These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.
- `animation`: Not a prop. Skeleton shimmers, and pulses instead with reduced motion.
- `height`: Not a prop. Size it with a layout class: ``.
- `variant`: Not a prop. Ouro UI uses `shape`: ``.
- `width`: Not a prop. Size it with a layout class: ``.
## `className` is for layout only
Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`).
Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn.
Alignment classes (`text-center`) warn too: set alignment on a parent element.