Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

In development

Do not use

Skeleton

Usage Guidelines

Loading

SkeletonText

Sizes

<>
  {availableSizes.map((size, index) => (
    <SkeletonText size={size} key={index} />
  ))}
</>

<>
  {availableSizes.map((size, index) => (
    <SkeletonText size={size} key={index} />
  ))}
</>

Number of lines

<SkeletonText lines={3} />

<SkeletonText lines={3} />

Props

name

type

default

size

| 'body-sm' | 'body-md' | 'body-lg' | 'heading-sm' | 'heading-md' | 'heading-lg'

'body-md'

lines

number

1