Skeleton
ExperimentalReserve the shape of content while it loads.
Example
Loading status belongs to the region. Placeholders are decorative.
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Skeleton } from 'panel-ui-kit/skeleton'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <div aria-busy="true" aria-label="Loading profile"> <Skeleton style={{ width: 160, height: 20 }} /> <Skeleton style={{ width: 240, height: 16, marginTop: 12 }} /> </div> </PanelUiTheme> );}When to use
Decorative only. Put aria-busy and meaningful loading status on the owning region. Avoid replacing focused controls.
Keyboard
No interactive behavior or tab stop.
Properties
| Property | Values | Default |
|---|---|---|
style | Caller dimensions | — |
motion | full · reduced · off · object | Inherited |