Installation
Run the following command
npx vibes@latest add skeleton
Usage
import * as Skeleton from '@/vibes/soul/primitives/skeleton';function Usage() { return ( <Skeleton.Root className="w-96"> <Skeleton.Box className="h-32 w-full rounded-xl" /> <Skeleton.Text characterCount={24} /> </Skeleton.Root> );}
API Reference
Skeleton.Root
| Prop | Type | Default |
|---|
children
| ReactNode
| |
className
| string
| |
pending
| boolean
| false
|
hideOverflow
| bolean
| false
|
Skeleton.Text
| Prop | Type | Default |
|---|
className
| string
| |
characterCount
| number | 'full'
| 10
|
Skeleton.Box
| Prop | Type | Default |
|---|
className
| string
| |
Skeleton.Icon
| Prop | Type | Default |
|---|
className
| string
| |
| ReactNode
| |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --skeleton: color-mix(in oklab, var(--contrast-300) 15%, transparent);}
