# antuikit / Skeleton

> Skeleton, with its five element placeholders attached. Skeleton.Image draws the icon pack's `image` glyph in place of antd's picture.

Docs: https://antuikit.com/docs/components/skeleton

## Install

npx antuikit@latest init
npx antuikit@latest add skeleton

## Import

import { Skeleton } from "@/components/ui/skeleton";

## Demos

- [Basic](https://ui.antuikit.com/embed/skeleton/basic.md): A `Skeleton` with no props draws a title bar over three paragraph lines, the default placeholder for a block of text.
- [Round](https://ui.antuikit.com/embed/skeleton/round.md): Set `round` to draw the title and paragraph bars as capsules instead of rectangles with small corners.
- [Active](https://ui.antuikit.com/embed/skeleton/active.md): Set `active` to run a shimmer across the bars, which tells the reader the content is still on its way.
- [With avatar](https://ui.antuikit.com/embed/skeleton/avatar.md): Set `avatar` to draw a circle beside the title and paragraph lines, the placeholder for a comment or a profile row.
- [Title](https://ui.antuikit.com/embed/skeleton/title.md): Set `title` to a width to shorten the title bar, or to `false` to draw the paragraph lines on their own.
- [Paragraph](https://ui.antuikit.com/embed/skeleton/paragraph.md): Set `paragraph.rows` for the number of lines and `paragraph.width` for their widths, one value per line.
- [Skeleton.Button](https://ui.antuikit.com/embed/skeleton/button.md): `Skeleton.Button` holds the place of a button, with the button's `shape` and `size` options and `block` to fill the row.
- [Skeleton.Input](https://ui.antuikit.com/embed/skeleton/input.md): `Skeleton.Input` holds the place of a text field, in three sizes, with `block` to fill the width of its container.
- [Skeleton.Avatar](https://ui.antuikit.com/embed/skeleton/skeleton-avatar.md): `Skeleton.Avatar` draws an avatar placeholder on its own, in three sizes and a square `shape`.
- [Skeleton.Image](https://ui.antuikit.com/embed/skeleton/image.md): `Skeleton.Image` holds the place of a picture, and `classNames.content` sets the size of its box.
- [Skeleton.Node](https://ui.antuikit.com/embed/skeleton/node.md): `Skeleton.Node` is a gray box that holds whatever you put inside it, like an icon or a short line of text.
- [Wrapping content](https://ui.antuikit.com/embed/skeleton/loading-children.md): Pass the real content as `children` and set `loading`, and the placeholder gives way to the content once loading ends.
- [List](https://ui.antuikit.com/embed/skeleton/list.md): Wrap each list row in its own `Skeleton`, with a `Skeleton.Button` holding the place of the row's action until it loads.
- [Card](https://ui.antuikit.com/embed/skeleton/card.md): A `Skeleton` with an avatar inside a `Card`, the placeholder for a profile or a comment while it loads.
- [Dashboard stats](https://ui.antuikit.com/embed/skeleton/dashboard-stats.md): A row of stat tiles, each a short `title` bar for the label over a taller `Skeleton.Input` for the number, while the metrics load.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/skeleton`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Skeleton` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.