Photonix

Skeleton

A placeholder to show where content will appear while loading.

Preview

Usage
import { Skeleton } from '@photonix/ultimate';

<Flex gap="md" align="center">
  <Skeleton variant="avatar" width={40} height={40} />
  <Box style={{ flex: 1 }}>
    <Skeleton variant="text" width="60%" />
    <Skeleton variant="text" width="90%" style={{ marginTop: '8px' }} />
  </Box>
</Flex>

Component API

Skeleton

Prop
Type
Default
Description
variant
"text" | "title" | "avatar" | "rectangular"
'text'
Variant of the skeleton - text: Single line of text (16px height) - title: Heading text (24px height) - avatar: Circular avatar (40x40px) - rectangular: Custom rectangular shape
width
string | number
-
Width of the skeleton (can be px, %, etc.)
height
string | number
-
Height of the skeleton (can be px, %, etc.)
rounded
"rounded" | "default" | "circular"
-
Border radius variant - default: Standard rounded corners - circular: Perfect circle - rounded: Fully rounded (pill)

Variants

Variants

Different shapes for different content types.

Text

Circular

Rectangular

Variants
<Skeleton variant="text" width="100%" />
<Skeleton variant="avatar" width={40} height={40} />
<Skeleton variant="rectangular" width={100} height={60} />

On this page

Preview
Component API
Variants
Variants
Photonix UI - React Components, Templates & Figma Design System