Skeleton

Headless Skeleton; covers WAI-ARIA status role, shadcn/ui Skeleton, React Aria ProgressBar.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Skeleton } from "@vizejs/ui/skeleton";

Or copy the source into your project with vize lib pull skeleton (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Labelled status skeleton that stands in for a profile card while it loads. -->
<script setup lang="ts">
import { Skeleton } from "@vizejs/ui/skeleton";
</script>

<template>
  <Skeleton as="section" aria-label="Loading profile">
    <Skeleton block-size="1.25rem" inline-size="60%" />
    <Skeleton block-size="1rem" inline-size="80%" />
  </Skeleton>
</template>

API

Skeleton

Source: src/families/feedback/skeleton/skeleton.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for skeleton.vue (@vizejs/ui/skeleton). Every row is proven by the named mounted-DOM or SSR test. A row without a passing test is a contract violation.

Props

Slots

Expose

Data Attributes

ARIA Attributes

CSS Custom Properties

Parts

Styling Contract

Skeleton is headless: it emits no stylesheet, animation, shimmer, or color preset. Consumers opt into visual treatment with ordinary CSS using the root part, data attributes, and the published custom properties.