Skeleton

Display placeholder content while data is loading.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage


import { Group, Skeleton } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16" w="full">
      <Skeleton />
      <Skeleton h="56" />
      <Skeleton circle size="56" />
    </Group>
  );
}

#
Children

Use children to insert things such as icons or graphics.


import { Avatar, Skeleton } from "@optiaxiom/react";
 
export function App() {
  return (
    <Skeleton>
      <Avatar />
    </Skeleton>
  );
}

#
Dimensions

Skeleton is automatically sized according to the parent font-size/line-height styles so we can combine it with Text or Heading component to achieve correctly sized textual placeholders.

h1

h3

body


import { Grid, Group, Heading, Skeleton, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gridTemplateColumns="2" w="full">
      <Demo loading />
      <Demo />
    </Grid>
  );
}
 
function Demo({ loading }: { loading?: boolean }) {
  return (
    <Group flexDirection="column" gap="16">
      <Heading>{loading ? <Skeleton /> : "h1"}</Heading>
      <Heading level="3">{loading ? <Skeleton /> : "h3"}</Heading>
      <Text>{loading ? <Skeleton /> : "body"}</Text>
    </Group>
  );
}

#
Example


"use client";
 
import { Avatar, Box, Group, Heading, Skeleton, Text } from "@optiaxiom/react";
 
export function App({ loading = true }: { loading: boolean }) {
  return (
    <Box bg="bg.default" maxW="sm" p="16" rounded="sm" shadow="sm" w="full">
      <Group alignItems="start" gap="16">
        {loading ? (
          <Skeleton>
            <Avatar size="xl" />
          </Skeleton>
        ) : (
          <Avatar name="Sample Person" size="xl" />
        )}
 
        <Group flex="1" flexDirection="column" gap="16">
          <Heading level="3">
            {loading ? <Skeleton /> : "Lorem ipsum dolor"}
          </Heading>
          <Text asChild fontSize="sm">
            <span>{loading ? <Skeleton w="1/3" /> : "Nullam rhoncus"}</span>
          </Text>
          <Text>
            {loading ? <Skeleton /> : "Phasellus efficitur feugiat luctus et."}
          </Text>
        </Group>
      </Group>
    </Box>
  );
}

#
Related

Progress

Display feedback on status of task or length of a process.

Spinner

Used for indicating an unspecified wait time.

#
Props

#
Skeleton

Supports all Box props in addition to its own. Renders a <span> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true` Default: `true`
`circle` Render skeleton as a circle if `true`. When enabled, automatically sets rounded=“full”. `false \| true`
`className` `string`
`rounded` Border radius of the skeleton. Defaults to “sm” for regular shapes, automatically set to “full” when circle=. `"inherit" \| "none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` Default: `sm`

#
Changelog

#
0.1.0

Added component