# Skeleton: Text

> `<SkeletonText />` draws one bar per line and follows the parent’s font size and line height, so it fills the same space as the text it replaces. The last line is shorter.

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

## Add this example

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

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

## Source

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

export function SkeletonTextDemo() {
  return (
    <div className="grid w-full max-w-md grid-cols-3 gap-6">
      <div className="text-sm">
        <SkeletonText lines={3} />
      </div>
      <div className="text-lg">
        <SkeletonText lines={3} />
      </div>
      <div className="text-sm leading-8">
        <SkeletonText lines={3} />
      </div>
    </div>
  )
}
```

## Props in this example

### SkeletonText

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lines` | `number` | `3` | Rounded down and kept between 1 and 50. |

## More Skeleton examples

- [Shapes](https://hextaui.com/docs/skeleton/examples/shapes.md)
- [Animations](https://hextaui.com/docs/skeleton/examples/animations.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)