Skip to main content
Browse docs

Marwes documentation

Skeleton

Loading-placeholder component with text, circular, and rectangular shapes mapped from the synced Figma Skeleton page into one core recipe and shared React, Vue, and Svelte behavior.

What this family solves

Loading-placeholder component with text, circular, and rectangular shapes mapped from the synced Figma Skeleton page into one core recipe and shared React, Vue, and Svelte behavior.

Use when

  • The UI needs a lightweight placeholder for loading text, avatar/media circles, or rectangular content blocks.
  • The product already owns the surrounding loading context and the skeleton can stay decorative.
  • React, Vue, and Svelte consumers should receive the same placeholder dimensions, shape variants, animation choices, and accessibility contract.

Avoid when

  • The experience needs determinate progress, percentage tracking, or an indeterminate activity indicator instead of structural placeholders.
  • The implementation cannot provide a truthful ariaLabel when a standalone skeleton region must announce loading status.
  • The product needs a layout-specific skeleton composition that should live as an adapter/story composition rather than core component API.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

Skeleton

Type

SkeletonProps

Vue — @marwes-ui/vue

Component

Skeleton

Type

SkeletonProps

Svelte — @marwes-ui/svelte

Component

Skeleton

Type

SkeletonProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { Skeleton } from "@marwes-ui/react"

export function Example() {
  return <Skeleton ariaLabel="Loading profile" variant="rectangular" width="100%" height={120} />
}

Vue

<script setup lang="ts">
import { Skeleton } from "@marwes-ui/vue"
</script>

<template>
  <Skeleton
    aria-label="Loading profile"
    variant="rectangular"
    width="100%"
    :height="120"
  />
</template>

Svelte

<script lang="ts">
  import { Skeleton } from "@marwes-ui/svelte"
</script>

<Skeleton
  ariaLabel="Loading profile"
  variant="rectangular"
  width="100%"
  height={120}
/>

Accessibility requirements

  • Loading context: Keep structural skeletons decorative unless the loading region needs an announced status label.
  • Screen-reader review: Verify the surrounding region communicates loading without repeated or noisy announcements.
  • Manual review boundary: Product-level decisions about when a skeleton is decorative versus when a loading region needs an announced status label.
  • Manual review 2: Visual review against the synced Figma page after V3 Skeleton design-system sources become more complete.

Theming

Skeleton uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources