Photonix

Skeleton

A placeholder to show where content will appear while loading.

Preview

Usage
"use client";

import { Flex, Skeleton, Stack } from '@photonix/ultimate';

export default function SkeletonBasicExample() {
    return (
        <Stack gap="sm">
            <Flex gap="sm" align="center">
                <Skeleton variant="avatar" rounded="circular" />
                <Stack gap="xs">
                    <Skeleton variant="title" width={160} />
                    <Skeleton variant="text" width={240} />
                </Stack>
            </Flex>
            <Skeleton variant="rectangular" width="100%" height={120} rounded="default" />
        </Stack>
    );
}

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

Skeleton Variants

Skeleton source includes text, title, avatar, rectangular, rounded, and explicit dimensions.

Skeleton Variants
"use client";

import { Flex, Skeleton, Stack } from '@photonix/ultimate';

export default function SkeletonBasicExample() {
    return (
        <Stack gap="sm">
            <Flex gap="sm" align="center">
                <Skeleton variant="avatar" rounded="circular" />
                <Stack gap="xs">
                    <Skeleton variant="title" width={160} />
                    <Skeleton variant="text" width={240} />
                </Stack>
            </Flex>
            <Skeleton variant="rectangular" width="100%" height={120} rounded="default" />
        </Stack>
    );
}

On this page

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