Skeleton

Enhance the perceived performance of your application by using rothko ui's Skeleton component. Display placeholder content that mimics the actual data, giving users a visual indication of loading or content areas before they are fully rendered.

View Source

Import

Global
Single

import { SkeletonBoxWithLabel, SkeletonBuilder } from '@rothko-ui/react';

Usage

Box with Label

Example
Code

Box

Example
Code

Custom

Example
Code

Props

Name	Type	Default	Description
Name backgroundColor	Type `Color`	Default	Description Background color of the skeleton
Name foregroundColor	Type `Color`	Default	Description Foreground color of the skeleton
Name gradientProps	Type `SVGAttributes<SVGLinearGradientElement>`	Default	Description Props for the SVG linear gradient element
Name speed	Type `number`	Default `1.5`	Description Speed factor of the skeleton animation in seconds