Ouro HX

Display

Skeleton

A shimmering placeholder in the shape of content that is still loading. Screen readers skip it, so mark the region that is loading with aria-busy while it shows. With reduced motion it is a flat fill that pulses instead of shimmering.

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/skeleton#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/skeleton

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/skeleton#v1.2.13 ourostack/ouro-ui/skeleton-tests#v1.2.13
import { Skeleton } from "@/components/ouro/skeleton/skeleton";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<div aria-busy="true" className="grid gap-2">
  <Skeleton shape="circle" />
  <Skeleton shape="text" className="w-1/2" />
  <Skeleton className="h-32" />
</div>

Use instead when

  • Use Spinner instead for a wait with no layout to hold, and Progress when you know how far along the work is.

Props

Type: SkeletonProps.

className
Type: string
Layout only: size, margins and placement (h-32, w-1/2, size-12). The color and corners come from the theme and shape.
ref
Type: Ref<HTMLDivElement>
Reaches the rendered element.
shape
Type: "text" | "circle" | "rect"
Default: "rect"
The outline of what is loading: rect for a block such as an image or a card, text for a line of text, circle for an avatar. Size it with layout classes: className="h-32", className="w-1/2", className="size-12".

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • animation: Not a prop. Skeleton shimmers, and pulses instead with reduced motion.
  • height: Not a prop. Size it with a layout class: <Skeleton className="h-6">.
  • variant: Not a prop. Ouro UI uses shape: <Skeleton shape="circle">.
  • width: Not a prop. Size it with a layout class: <Skeleton className="w-32">.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2).

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Source on GitHubThis page as Markdown