Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenComponents
Skeleton
Skeleton shows a placeholder while your content loads, keeping the layout intact and users chillin' till the real deal pops in.
Basic
Skeleton is a placeholder component that displays a loading state while your content loads. It's a great way to keep your layout looking fresh and prevent users from getting stuck on a blank page.
Preview
Code
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Manual Installation
Anatomy
Intent
By default, the skeleton is displayed with a muted intent. You can change the intent by passing the intent prop. This example demonstrates different intents.
Preview
Code
Shape
You can change the shape of the skeleton by passing the shape prop. This example demonstrates different shapes.
Preview
Code