Skeleton

A placeholder in the shape of content that is loading.

import { Skeleton } from '@kition/tessera-ui'

Playground

Props

lines

width

What is shown

import { Skeleton } from '@kition/tessera-ui'

<Skeleton lines={3} width={320} />

Examples

Title and paragraph

skeleton.tsx

import { Skeleton } from '@kition/tessera-ui'

export default function Demo() {
  return (
    <div style={{ display: 'grid', gap: 12, maxWidth: 360 }}>
      <Skeleton width={180} height={20} />
      <Skeleton lines={3} />
    </div>
  )
}

Props

Skeleton

A placeholder in the shape of content that is loading; lines draws a paragraph. Size it with width and height, or with classes (16px tall by default).

Prop	Type	Default
`width`	`number \| string`	—
`height`	`number \| string`	—
`lines`	`number`	—
`className`	`string`	—