Skeleton

A placeholder shown while content loads.

import { ... } from '@corndev/ui'

HTML

No JavaScript required — these classes are the whole component.

<div class="corn-skeleton" data-variant="text"></div>

Classes

Class
`.corn-skeleton`

Attributes

Attribute	Values
`data-variant`	`text\|rectangular\|circular`

Vanilla JS

Optional. createSkeleton only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createSkeleton } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createSkeleton(el, { /* options */ });

Options

Option	Type	Default	Description
`variant`	`'text'\|'rectangular'\|'circular'`	`'text'`
`width`	`number\|string`	`undefined`	CSS width (number → px).
`height`	`number\|string`	`undefined`	CSS height (number → px).

React

Skeleton — from @corndev/ui-react.

The props are the same as the options above, plus className.

A skeleton is a low-contrast placeholder that mirrors the shape of content while it loads, reducing layout shift. It’s decorative (aria-hidden), so keep a separate role="status"/Spinner for the announced loading state.

Usage

import { Skeleton } from '@corndev/ui-react';

<Skeleton />                                       {/* text line */}
<Skeleton variant="text" width="60%" />
<Skeleton variant="circular" width={48} height={48} />
<Skeleton variant="rectangular" width="100%" height={160} />

import { createSkeleton } from '@corndev/ui';
createSkeleton(document.querySelector('#ph'), { variant: 'rectangular', height: 160 });