Feedbackreadycomponentready

Skeleton

A dependency-free loading placeholder primitive with hidden semantics, pulse animation, and app-owned dimensions and shapes.

Importimport { Skeleton } from 'radcn/skeleton'

Preview

Live package example

Render the upstream card loading placeholder and avatar/list loading row with exact dimensions and shapes.

Card and Demo

Render the upstream card loading placeholder and avatar/list loading row with exact dimensions and shapes.

Preview

import { Skeleton } from 'radcn/skeleton'

export function SkeletonPreview() {
  return (
    <>
      <div style="display:flex;flex-direction:column;gap:0.75rem;">
        <Skeleton style="height:125px;width:250px;border-radius:0.75rem;" />
        <div style="display:grid;gap:0.5rem;">
          <Skeleton style="height:1rem;width:250px;" />
          <Skeleton style="height:1rem;width:200px;" />
        </div>
      </div>

      <div style="display:flex;align-items:center;gap:1rem;">
        <Skeleton style="height:48px;width:48px;border-radius:999px;" />
        <div style="display:grid;gap:0.5rem;">
          <Skeleton style="height:1rem;width:250px;" />
          <Skeleton style="height:1rem;width:200px;" />
        </div>
      </div>
    </>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Skeleton } from 'radcn/skeleton'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Skeleton renders aria-hidden="true" because it is decorative loading affordance, not readable content.
Loading status text should be supplied by the surrounding application when users need an announced status.
The primitive emits data-radcn-skeleton so apps and tests can identify placeholders without relying on DOM shape.
Pulse animation is visual only; content structure and loading announcements remain app-owned.

Customization

Skeleton exposes data-radcn-skeleton plus class and style for exact width, height, border radius, and layout composition.
Card media, avatar circles, and text lines are app-owned uses of the same Skeleton primitive.
Use CSS variables such as --radcn-skeleton-bg or ordinary app CSS to adjust placeholder color.
Flex, grid, spacing, fixed dimensions, rounded-full, and rounded-xl wrappers belong to examples or app markup.

Remix 3 Notes

React props, className, data-slot, Tailwind utilities, cn, and vendor source map to explicit RadCN props, class, public data hooks, package CSS, inline style, and CSS variables.
data-slot="skeleton" maps to data-radcn-skeleton.
The package does not add card, avatar, text-line, flex, or spacing-specific APIs; those are composition details.
Fixed dimensions and rounded shapes remain app-owned style choices rather than Skeleton package dependencies.
vendor source remains read-only evidence and is not imported by RadCN.