104Get started
HextaUI

Skeleton: Inline

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

Your balance is as of today.

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>
  )
}

Add this example

This adds the example as components/examples/skeleton/inline.tsx, together with the Skeleton component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/skeleton-inline.json

To add only the component, follow the Skeleton installation.

Props in this example

The Skeleton props this example sets, from the API reference.

Skeleton

PropTypeDefault
loadingWhen set, the skeleton wraps its children: true shows the placeholder, false shows the content. Leave it out for a standalone placeholder.
boolean–
render
ReactElement | (props, state) => ReactElement<div>

Every prop is in the Skeleton API reference.

More Skeleton examples

See them all, with keyboard support and accessibility notes, on the Skeleton page.

Related components