GET STARTED

Import

Import the canonical standalone component from its granular entry point.

import { NeuralSkeleton } from '@neural-ng/core/skeleton';

@Component({ imports: [NeuralSkeleton] })

Basic text placeholders

The rounded default fills its container. Width and height accept CSS length strings instead of framework-specific size shortcuts.

Shapes and dimensions

Circle uses one size value; rectangle and rounded variants use independent dimensions. borderRadius can override any chosen shape.

Pulse, wave and none

Pulse is the calm default, wave communicates active fetching and none creates a completely static placeholder.

Content-aware composition

Match the final layout to avoid content shift. The surrounding region—not each decorative bar—owns aria-busy and its stable name.

Static placeholders

Use animation="none" in dense views, snapshots or products where motion would distract. Dimensions and theme surface remain unchanged.

Unstyled and typed slots

Structural clipping and explicit dimensions remain while consumer classes own the root and effect.

Usage boundaries

Decorative semantics

Every skeleton is aria-hidden=true and has no role. Screen readers do not announce every visual line or card shape.

Busy regions

Place aria-busy=true on the smallest meaningful region being refreshed and preserve its accessible name across loading and loaded states.

Stable announcements

Do not add a live region to each skeleton. If status narration is necessary, provide one concise status outside the decorative placeholders.

Reduced motion

Both pulse and wave animations stop automatically when prefers-reduced-motion requests reduced movement.

SSR and hydration

Rendering is declarative and browser-global free. Explicit dimensions produce the same server and client geometry.

Inputs

Typed class slots

Public types

Legacy alias

SkeletonComponent remains a deprecated compatibility alias. New code and AI-generated examples use NeuralSkeleton.

Surface and shape

Pulse

Wave