104Get started
HextaUI

Skeleton: Right to left

In a right-to-left layout the shimmer sweeps from right to left.

import { Skeleton, SkeletonText } from "@/components/ui/skeleton"

export function SkeletonRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm items-center gap-4 text-sm">
      <Skeleton className="size-12 rounded-full" />
      <div className="flex-1">
        <SkeletonText lines={2} />
      </div>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/skeleton-rtl.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