Skeleton

Provide placeholder graphics at locations where content is loading.

Basic Usage

The most basic text-only skeleton screen.

Basic Usage

Common Layouts

Quickly build common list item layouts with avatar, title, and rows.

Common Layouts

Fine-grained Item Control (SkeletonItem)

When built-in layouts don't meet your needs, use YhSkeletonItem for free composition. Supports semantic variants like circle, rect, text, button, image, and more.

Item Control Demo

Creative: Advanced Cards

Easily implement complex card flow skeletons using variant="rect" and repeat attributes.

Card Skeleton

Custom Advanced Features

1. Smart Throttling (Throttle)

Set display delay with throttle prop. If async data loads within the set time, the skeleton will never appear.

2. Viewport Detection (Lazy Animation)

When lazy is enabled, the skeleton animation only starts when the element enters the viewport.

3. Polymorphic Rendering

YhSkeletonItem covers common atomic placeholder variants for custom composition.

Use in Nuxt

YhSkeleton and YhSkeletonItem can be rendered directly in Nuxt after registering the YH-UI module. Skeleton placeholders render as normal markup during SSR, and animation continues on the client after hydration.

Use in Nuxt

API

Props

Name	Description	Type	Default
loading	Whether to show loading render	boolean	true
animated	Whether to enable shimmer animation	boolean	true
rows	Number of rows for the default layout	number	3
title	Whether to render a title placeholder	boolean	false
avatar	Whether to render an avatar placeholder	boolean	false
throttle	Delay in milliseconds to prevent flickering	number	0
lazy	Only start animation when in viewport	boolean	false
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Events

This component does not expose component events.

Slots

Name	Parameters	Description
template	-	Skeleton placeholder content shown while loading is true.
default	-	Content rendered after loading completes.

Expose

This component does not expose public instance methods or properties.

Skeleton Item Props

Name	Description	Type	Default
variant	Variant type (circle, rect, h1, h3, text, caption, button, image)	YhSkeletonItemVariant	'text'
width	Width	string | number	undefined
height	Height	string | number	undefined
animated	Whether to enable shimmer animation	boolean	true
round	Whether to use rounded corners	boolean	false
sharp	Whether to force sharp corners	boolean	false
repeat	Number of times to repeat	number	1
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Skeleton Item Slots

Name	Parameters	Description
image	-	Custom placeholder content used when variant="image".

Skeleton Item Expose

This component does not expose public instance methods or properties.

Theme Variables

YhSkeleton and YhSkeletonItem support themeOverrides, but they do not define dedicated component-level CSS variables. Their styles mainly consume shared global tokens such as --yh-fill-color-dark, --yh-fill-color-light, --yh-radius-base, and --yh-text-color-placeholder.

Type Exports

Name	Description
YhSkeletonProps	Skeleton props type
YhSkeletonSlots	Skeleton slots type
YhSkeletonInstance	Skeleton instance type
YhSkeletonItemProps	SkeletonItem props type
YhSkeletonItemVariant	SkeletonItem variant union type
YhSkeletonItemInstance	SkeletonItem instance type