Skip to content

Skeleton

Placeholder lines in the shape of content that is loading.

import { Skeleton } from '@brand-studio/ui';

export default function SkeletonDemo() {
  return (
    <div style={{ display: 'grid', gap: 24, width: '100%', maxWidth: 380 }}>
      <Skeleton avatar lines={2} label="Loading your profile" />
      <Skeleton lines={3} label="Loading tasting notes" />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Skeleton } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Skeleton } from '@brand-studio/ui';

<Skeleton avatar lines={2} label="Loading your profile" />

Accessibility

Screen readers hear label once through role="status". The grey shapes are hidden from them.
The shimmer stops under reduced motion; the shapes stay.
Match the shape of the content that replaces it, so the page does not jump when it loads.

API Reference

Prop	Type	Default
`lines?`	`number`	`3`
`avatar?`	`boolean`	`false`
`label?`	`string`	`'Loading'`
`className?`	`string`	`''`