Feedbackduskmoonimplemented9 demos

Skeleton

Skeleton shows a stable loading placeholder that matches the future content shape.

Import@duskmoon-dev/components/skeleton

10API sections

17documented props

7behavior scenarios

Key API

variantanimationactiveloadingavatartitle

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Skeleton is most often configured through `variant`, `animation`, `active`, `loading`.

Covered behavior

Renders title and paragraph placeholders by default

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Skeleton from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function Example() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Renders title and paragraph placeholders by default

test-backed

Skeleton scenario from the component test coverage: renders title and paragraph placeholders by default.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function SkeletonRendersTitleAndParagraphDemo() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Renders children when loading is false

test-backed

Skeleton scenario from the component test coverage: renders children when loading is false.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function SkeletonRendersChildrenWhenLoadingDemo() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Applies primitive variant classes

test-backed

Skeleton scenario from the component test coverage: applies primitive variant classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function SkeletonAppliesPrimitiveVariantClassesDemo() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Applies compound variant classes

test-backed

Skeleton scenario from the component test coverage: applies compound variant classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function SkeletonAppliesCompoundVariantClassesDemo() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Uses wave animation when active and static behavior by default

test-backed

Skeleton scenario from the component test coverage: uses wave animation when active and static behavior by default.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function SkeletonUsesWaveAnimationWhenDemo() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Supports pulse animation without static or wave modifiers

test-backed

Skeleton scenario from the component test coverage: supports pulse animation without static or wave modifiers.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function SkeletonSupportsPulseAnimationWithoutDemo() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Applies custom className

test-backed

Skeleton scenario from the component test coverage: applies custom classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Skeleton } from "@duskmoon-dev/components/skeleton";

export function SkeletonAppliesCustomClassNameDemo() {
  return (<Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>
</div>

<div data-theme="moonlight">
  <Skeleton
  active
  avatar
  paragraph={{ rows: 3 }}
  style={{ width: "420px", maxWidth: "100%" }}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Skeleton. Start with `variant`, `animation`, `active`, `loading` for common usage.

Types: packages/components/src/components/skeleton/Skeleton.types.tsScenarios: packages/components/src/components/skeleton/Skeleton.test.tsx

SkeletonPropsinterface extends Omit<ComponentProps<"div">, "title">

Prop	Type	Required	Description
`variant`	`SkeletonVariant`	No	variant configures Skeleton.
`animation`	`SkeletonAnimation`	No	animation configures Skeleton.
`active`	`boolean`	No	active configures Skeleton.
`loading`	`boolean`	No	loading configures Skeleton.
`avatar`	`boolean \| SkeletonAvatarProps`	No	avatar configures Skeleton.
`title`	`boolean \| SkeletonTitleProps`	No	title configures Skeleton.
`paragraph`	`boolean \| SkeletonParagraphProps`	No	paragraph configures Skeleton.
`round`	`boolean`	No	round configures Skeleton.

SkeletonTitlePropsinterface

Prop	Type	Required	Description
`width`	`SkeletonWidth`	No	width configures Skeleton.

SkeletonParagraphPropsinterface

Prop	Type	Required	Description
`rows`	`number`	No	rows configures Skeleton.
`width`	`SkeletonWidth \| SkeletonWidth[]`	No	width configures Skeleton.

SkeletonAvatarPropsinterface

Prop	Type	Required	Description
`shape`	`"circle" \| "square"`	No	shape configures Skeleton.

SkeletonElementPropsinterface extends ComponentProps<"div">

Prop	Type	Required	Description
`active`	`boolean`	No	active configures Skeleton.
`animation`	`SkeletonAnimation`	No	animation configures Skeleton.
`round`	`boolean`	No	round configures Skeleton.

SkeletonAvatarElementPropsinterface extends SkeletonElementProps

Prop	Type	Required	Description
`shape`	`"circle" \| "square"`	No	shape configures Skeleton.

SkeletonNodePropsinterface extends SkeletonElementProps

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Skeleton.

SkeletonVarianttype

"text" | "circle" | "rect" | "button" | "input" | "card"

SkeletonAnimationtype

"pulse" | "wave" | "none"

SkeletonWidthtype

"full" | "threeQuarter" | "half" | "quarter"