Skeleton

Keep users hooked while your content loads with our Skeleton. It's a fun sneak peek into what's to come

Example

1  import { Skeleton, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox justify='center' direction='column' gap='3'>
4    <Skeleton type='default' />
5    <Skeleton type='square' />
6    <Skeleton type='circle' />
7  </FlexBox>
8

API Reference

Component	Description
Skeleton	Meet Skeleton, the silent understudy ready to take the stage when your content is still getting ready. This component provides an animated placeholder, ideal to use when data is loading or yet to be fetched, improving perceived performance and providing a smooth user experience.

Skeleton

Prop	Type	Default	Explanation
`type`	`string`	default	From circles to badges to headings, the type prop defines the shape and size of your Skeleton component.

All the available types (shapes):

default
square
circle
title
heading
text
smallText
smallBadge
badge
largeBadge
smallButton
button
largeBadge
image

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius