NexoreUI
InstallationComponentsNexore MakeGitHub
GitHub
NexoreUIv0.1.2

Getting Started

Installation

Components

ButtonInputCardBadgeAlertAvatarAccordionModal / DialogTooltipTabsProgressSkeletonSliderSwitchRatingCommandTableStepperScroll AreaFile UploadNavigationIconsDock

Pro

ChartsData DisplayDark Mode ToolkitCommerceCookie ConsentSocialPremium EffectsLoaders

Animated

MarqueeNumber TickerAnimated NumberTyping AnimationBlur FadeBox RevealFile Preview CardImage Compare
MIT License
DocsSkeleton

Skeleton

Loading placeholders for content.

Next ComponentSlider

Skeletons

Placeholder elements that mimic layout structures while content loads.

When to use

layout placeholdersReducing perceived latency during data fetching (loading feed items, user profile blocks)
circular skeletonsRepresenting avatars, profile badges, circular buttons, and status icons
lines & paragraphsSimulating dynamic line lengths of block copy text or headers to prevent page layout jumps

Interactive Playground

Skeleton Playground
nexoreui
Live Preview
Props Panel
select

The shape of the skeleton placeholder

number

The count of items to render sequentially

boolean

Displays the loading shimmer sweep animation

text

Custom width value

text

Custom height value

Generated Code
Open in GitHub
import { Skeleton } from "nexoreui"

<Skeleton />

Default Skeleton

component.tsx

Circular Skeleton

component.tsx

Skeleton Paragraph

component.tsx

User Profile Skeleton

component.tsx

Skeleton Card

component.tsx
Page 1 of 2

API Reference (Props)

PropTypeDefaultDescription
widthstring | number—The width value of the skeleton (e.g. 100%, 150px, or numeric).
heightstring | number—The height value of the skeleton.
variant"line" | "circle" | "rect""rect"The shape type variant.
countnumber1The number of rows of skeletons to render.
animatedbooleantrueWhether to render a dynamic sliding shimmer background.
classNamestring—Additional custom class names.

♿ Accessibility (a11y)

  • ARIA Attributes: Always include aria-busy="true" on container layouts that are currently rendering skeleton assets to inform screen readers of the active load operation.
  • Alternative Text: Skeletons are decorative and should generally be hidden from screen readers using aria-hidden="true", while exposing a single aria-live loading message elsewhere.