Skeleton

Installation#

npmpnpmyarnbun

npx sugarcoat add skeleton

Examples#

Default#

Default

Type Variants#

Skeleton supports various preset types for common UI patterns.

Basic Types

Text Types#

Text Types

Badge Types#

Badge Types

Button Types#

Button Types

Image Type#

Image Type

Custom Dimensions#

Apply custom dimensions using the style prop.

Custom Dimensions

Card Skeleton#

Card Skeleton

User Profile Skeleton#

User Profile Skeleton

List Skeleton#

List Skeleton

Table Skeleton#

Table Skeleton

Loading State Toggle#

Loading Toggle

Usage#

Import

import { Skeleton } from "@sugarcoat/ui-nxt";

Usage

// Use preset types
<Skeleton type="text" />
<Skeleton type="circle" />
<Skeleton type="button" />

// Or customize dimensions
<Skeleton style={{ width: '200px', height: '100px' }} />

Props#

Prop	Type	Default	Description
type	"default" \| "circle" \| "square" \| "smallText" \| "text" \| "heading" \| "title" \| "image" \| "smallBadge" \| "badge" \| "largeBadge" \| "smallButton" \| "button" \| "largeButton"	"default"	Preset type determining size and shape
className	string	-	Additional CSS classes
style	CSSProperties	-	Inline styles for custom dimensions

Accessibility#

Skeleton components are purely decorative and hidden from screen readers
Use aria-busy="true" on the parent container while loading
Provide an aria-label or visually hidden text describing the loading state
Consider using aria-live="polite" to announce when content has loaded