Houzz UI

Usage

Skeleton can be used to build placeholder “loading” UI. The default dimensions are width=100% and height=16px, it is recommended to specify dimensions as required.

import { Skeleton } from '@houzz/ui';

<VerticalStack mt="M" width={260} gap="S">
    <HorizontalStack alignItems="center">
        <Skeleton variant="circle" width={40} height={40} />
        <VerticalStack gap="XS">
            <Skeleton width={160} />
            <Skeleton width={40} height={12} />
        </VerticalStack>
    </HorizontalStack>
    <Skeleton height={140} />
    <Skeleton variant="pill" width={120} height={24} alignSelf="end" />
</VerticalStack>

<VerticalStack mt="M" width={260} gap="S">
    <HorizontalStack alignItems="center">
        <Skeleton variant="circle" width={40} height={40} />
        <VerticalStack gap="XS">
            <Skeleton width={160} />
            <Skeleton width={40} height={12} />
        </VerticalStack>
    </HorizontalStack>
    <Skeleton height={140} />
    <Skeleton variant="pill" width={120} height={24} alignSelf="end" />
</VerticalStack>

Shape variants

There are three shape variants available: rectangle, pill andcircle.

Animation

By default, a pulsating flash animation is used. It can also be disabled by setting none.

Props

Skeleton

System Props

COMMON
TYPOGRAPHY
BORDER
LAYOUT
POSITION
FLEX
GRID
Learn More

Name	Type	Description
`gradient`	`ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>`	-
`variant`	`"circle" \| "rectangle" \| "pill"`	Shape of the skeleton loader
`animation`	`"none" \| "flash"`	Animation style

SkeletonHealthy

Usage

Shape variants

Animation

Props

System Props