Skeleton

Loading placeholder shimmer.

import { Skeleton } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<Skeleton variant="circle" size={60} />

<Skeleton variant="text" lines={3} />

Prop	Type	Default	Description
`variant`	`'rect' \| 'circle' \| 'text'`	`'rect'`	Shape variant.
`width`	`string \| number`	`'100%'`	Width (CSS value or pixels). Only applies to rect variant.
`height`	`string \| number`	`'20px'`	Height (CSS value or pixels). Only applies to rect variant.
`size`	`number`	`40`	Diameter for circle variant in pixels.
`lines`	`number`	`3`	Number of lines for text variant.
`class`	`string`	—	Additional CSS classes.
`unstyled`	`boolean`	`false`	Remove all default styling classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.