# Skeleton: Inline

> Pass `render={<span />}` to place a skeleton inside a sentence. It sits on the text baseline.

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

## Add this example

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

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

## Source

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

export function SkeletonInline() {
  return (
    <p className="text-sm">
      Your balance is{" "}
      <Skeleton loading render={<span />}>
        <strong>$12,480.00</strong>
      </Skeleton>{" "}
      as of today.
    </p>
  )
}
```

## Props in this example

### Skeleton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `loading` | `boolean` | – | When set, the skeleton wraps its children: true shows the placeholder, false shows the content. Leave it out for a standalone placeholder. |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Skeleton examples

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