Docs Components

Skeleton

A placeholder component for loading states, mimicking the shape of content.

Installation

Copy and paste the following code into your project

import { styled } from '@styled-system/jsx'
import { skeleton } from '@styled-system/recipes'
 
export const Skeleton = styled('div', skeleton)

Update the import paths to match your project setup

Usage

import { Skeleton } from '@/components/ui/skeleton'

<Skeleton css={{ width: '100px', height: '20px' }} />

Examples

Default

Text Block

Circle