Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Loading a project
  • Text block
  • Circle with metadata
  • Rectangle card preview
  • Recommendations
  • Usage boundaries
  • API reference

Feedback

Skeleton

Displays a synchronized shimmer placeholder for loading content.

idle

Usage

import { Skeleton } from "@mizen-labs/ui";

Examples

Loading a project

The project summary keeps its place while content loads.

Text block

Composes multiple line skeletons to simulate paragraph loading.

Circle with metadata

Pairs an avatar or icon placeholder with descriptive metadata lines.

Rectangle card preview

Provides a block placeholder for media, cards, and container surfaces.

Recommendations

GuidancePractice
Do

Match the expected content's broad shape and preserve layout space while loading.

Usage boundaries

GuidanceBoundary
Scope

Keep placeholders out of the accessibility reading order. Show an explicit error when loading fails.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
shape"line" | "circle" | "rectangle""line"Visual geometry variant: line for text bars, circle for avatars and icons, or rectangle for cards and media blocks.
aria-hiddenboolean | 'true' | 'false'trueWhether the skeleton is hidden from the accessibility tree.
childrenReactNode—Optional content rendered inside the skeleton.
PreviousProgressNextSpinner