---
title: Skeleton
description: A placeholder in the shape of the content that is loading.
---

```tsx
import { Skeleton } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SkeletonBasic() {
  return (
    <Preview stack={true}>
      <Skeleton.Root className="h-4" />
      <Skeleton.Root className="h-4 w-2/3" />
    </Preview>
  );
}
```

- Match the real layout: the same row height, the same columns. Set the size and shape with `className`.
- Use it where content of a known shape is loading. A [Spinner](/deft/components/spinner) is for places where no shape fits.
- It is hidden from screen readers. The pulse stops when the reader prefers reduced motion.

## API

Parts: `Root`. Other props go to the native `div`.