104Get started
HextaUI

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.

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

Add this example

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

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

To add only the component, follow the Skeleton installation.

Props in this example

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

SkeletonText

PropTypeDefault
linesRounded down and kept between 1 and 50.
number3

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