# Skeleton: Shapes

> On its own, a skeleton is an empty block. Give it a size and radius with classes to match what it stands in for.

Example: https://hextaui.com/docs/skeleton/examples/shapes
Component docs: https://hextaui.com/docs/skeleton.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/skeleton-shapes.json
```

This adds `components/examples/skeleton/shapes.tsx` with the Skeleton component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/skeleton/shapes.tsx"
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonShapes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <div className="flex items-center gap-4">
        <Skeleton className="size-12 rounded-full" />
        <div className="flex flex-1 flex-col gap-2">
          <Skeleton className="h-4 w-2/5" />
          <Skeleton className="h-4 w-3/5" />
        </div>
        <Skeleton className="h-8 w-20" />
      </div>
      <Skeleton className="aspect-video w-full rounded-xl" />
    </div>
  )
}
```

## More Skeleton examples

- [Animations](https://hextaui.com/docs/skeleton/examples/animations.md)
- [Text](https://hextaui.com/docs/skeleton/examples/text.md)
- [Wrap real content](https://hextaui.com/docs/skeleton/examples/wrap-content.md)
- [Inline](https://hextaui.com/docs/skeleton/examples/inline.md)
- [Fast load](https://hextaui.com/docs/skeleton/examples/fast-load.md)
- [Many rows](https://hextaui.com/docs/skeleton/examples/many-rows.md)
- [Right to left](https://hextaui.com/docs/skeleton/examples/rtl.md)