Skeleton

A pulsing placeholder that holds space while content loads.

import { Box, HStack, Skeleton, VStack } from "astralis-ui";

export function SkeletonDemo() {
  return (
    <Box w="sm" maxW="full">
      <HStack gap="4" alignItems="center">
        <Skeleton variant="circle" className="astralis:size-12 astralis:shrink-0" />
        <VStack gap="2" alignItems="stretch" className="astralis:flex-1">
          <Skeleton variant="text" className="astralis:w-3/4" />
          <Skeleton variant="text" />
        </VStack>
      </HStack>
      <Skeleton variant="rect" className="astralis:mt-4 astralis:h-24" />
    </Box>
  );
}

Import#

import { Skeleton } from "astralis-ui";

Swapping in real content#

Pass loaded with the real content as children — the placeholder and the content occupy the same slot, so nothing jumps when data arrives.

"use client";

import { useState } from "react";
import { Avatar, Box, Button, HStack, Skeleton, Text, VStack } from "astralis-ui";

export function SkeletonLoaded() {
  const [loaded, setLoaded] = useState(false);

  return (
    <VStack gap="4" alignItems="start">
      <Box w="sm" maxW="full">
        <HStack gap="4" alignItems="center">
          <Skeleton variant="circle" loaded={loaded} className="astralis:size-12 astralis:shrink-0">
            <Avatar name="Nova Starling" />
          </Skeleton>
          <VStack gap="1" alignItems="stretch" className="astralis:flex-1">
            <Skeleton variant="text" loaded={loaded} className="astralis:w-1/2">
              <Text weight="semibold">Nova Starling</Text>
            </Skeleton>
            <Skeleton variant="text" loaded={loaded}>
              <Text size="sm" color="muted">Mission specialist · Astralis Station</Text>
            </Skeleton>
          </VStack>
        </HStack>
      </Box>
      <Button size="sm" variant="subtle" onClick={() => setLoaded((v) => !v)}>
        {loaded ? "Show skeleton" : "Finish loading"}
      </Button>
    </VStack>
  );
}

Props#

Prop	Type	Default	Description
`variant`	`"text" \| "circle" \| "rect"`	`"text"`	Placeholder shape (size `circle`/`rect` via className or style).
`animated`	`boolean`	`true`	Pulse animation — automatically pauses under `prefers-reduced-motion`.
`loaded`	`boolean`	`false`	Render children instead of the placeholder.

Accessibility#

The placeholder is aria-hidden — it's decoration, not information. If the loading state itself matters to screen-reader users, set aria-busy on the region or show a Spinner.