Primitive / Atomstable

Skeleton

Loading placeholder surface with reduced-motion fallback.

@glinui/uiComponent: skeleton

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add skeleton

Usage

Loading Pattern

TSX

1import { Skeleton } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-3">
6      <Skeleton className="h-32 w-full rounded-xl" />
7      <Skeleton className="h-4 w-3/4" />
8      <Skeleton className="h-4 w-1/2" />
9    </div>
10  )
11}

Glass Variant

TSX

1import { Skeleton } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-3">
6      <Skeleton variant="glass" className="h-6 w-40" />
7      <Skeleton variant="glass" className="h-4 w-full max-w-sm" />
8    </div>
9  )
10}

Accessibility

Sets `aria-hidden` when decorative.
Uses `motion-safe:animate-pulse` with `motion-reduce:animate-none`.

ARIA Attributes

`aria-hidden="true"` when decorative
`aria-busy="true"` on parent container

Reduced Motion

Pulse animation disabled with `prefers-reduced-motion: reduce`.

Affected properties

opacity

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "liquid" \| "matte" \| "outline" \| "ghost"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Height (h-4/h-6/h-10).
`decorative`	`boolean`	No	`true`	When true, sets aria-hidden.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Skeleton } from "@glinui/ui"

Source Files

skeleton.tsx

skeleton.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/skeleton.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

SkeletonProps

`SkeletonProps`

Prop	Type	Required	Default	Description
`decorative`	`boolean`	No	`true`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from skeletonVariants.
`variant`	`"default" \| "glass" \| "liquid" \| "matte" \| "outline" \| "ghost"`	No	`"default"`	Variant option from skeletonVariants.