Skeleton

A grey placeholder where content will appear.

SourcePackage @kerf-js/veneerTry it

Preview

tsx

import { Skeleton, Stack } from '@kerf-js/veneer'export function Shapes() {  return (  <Stack gap="group">    <Skeleton />    <Skeleton      shape="circle"      width="48px"      height="48px"    />    <Skeleton      shape="block"      height="96px"    />  </Stack>  )}

Installation

npm install @kerf-js/veneer

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

Live preview

Controls

Shape

textcircleblock

Shape

Lines3

Width

Height

Codeupdates as you change the controls

import { Skeleton } from '@kerf-js/veneer'<Skeleton lines={3} />

Usage

tsx

import { Skeleton } from '@kerf-js/veneer'

Lines

lines stacks text lines. The last is shorter.

tsx

import { Skeleton, Stack } from '@kerf-js/veneer'export function Lines() {  return (  <Stack gap="tight">    <Skeleton lines={4} />  </Stack>  )}

A person row

Use shape and width to sketch a person row while it loads.

tsx

import { Row, Skeleton, Stack } from '@kerf-js/veneer'export function Profile() {  return (  <Row    gap="related"    align="start"  >    <Skeleton      shape="circle"      width="40px"      height="40px"    />    <Stack gap="tight">      <Skeleton width="10rem" />      <Skeleton width="16rem" />    </Stack>  </Row>  )}

Then the content

Match the content's size, so nothing jumps.

tsx

import { onCleanup, state } from '@kerf-js/core'import {  Card,  Skeleton,  Stack,  Text} from '@kerf-js/veneer'export function ThenContent() {  const ready = state(false)  const timer = setTimeout(    () => (ready.value = true),    1800,  )  onCleanup(() => clearTimeout(timer))  return (    <Card>      {ready.value ? (        <Stack gap="tight">          <Text role="heading">checkout</Text>          <Text subtle>            Add Apple Pay to the last step, by Tomás. Live            in eu-west.          </Text>        </Stack>      ) : (        <Stack gap="tight">          <Skeleton width="40%" />          <Skeleton lines={2} />        </Stack>      )}    </Card>  )}

When to use

Use it for

Building your own loading state, piece by piece

Reach for something else

Shape, when the content is a plain list, card or table
Spinner, when you don't know the shape of what is coming

Accessibility

Skeletons say nothing to screen readers. Put aria-busy on the region, or use Shape, which does it for you.
Under reduced motion they stay still.

API Reference

Prop	Type	Default	Description
`shape`	`"circle" \| "text" \| "block"`	`'text'`	`text`, `circle` or `block`.
`lines`	`number`	`1`	How many text lines.
`width`	`string`	—	Any CSS length.
`height`	`string`	—	Any CSS length.

RelatedShape Spinner