Skeleton
This component renders a placeholder skeleton for loading content.
Import
import {Skeleton} from "cui-react";
Example
Render a basic skeleton:
Visual:
Code:
<Skeleton width="w-48" height="h-6" />
Customizing
You can customize the Skeleton
component using the following props:
width
(optional): Width of the skeleton (e.g.,w-48
,w-full
). Defaults tofull
.height
(optional): Height of the skeleton (e.g.,h-4
,h-8
). Defaults toh-4
.className
(optional): Additional CSS classes to apply to the skeleton.
Example: Custom Size and Style
Visual:
Code:
<Skeleton width="w-64" height="h-8" />
This example renders a skeleton with a width of w-64
, height of h-8
.
Props
-
width
- Type:
string
- Description: Width of the skeleton. Defaults to
full
.
- Type:
-
height
- Type:
string
- Description: Height of the skeleton. Defaults to
h-4
.
- Type:
-
className
- Type:
string
- Description: Additional CSS classes to apply to the skeleton.
- Type:
Use Examples:
Visual:
Skeleton example
Code:
<div className="max-w-lg p-10 mx-auto">
<h3 className="text-lg py-4">Skeleton example</h3>
<div className="flex items-center mb-4">
<Skeleton width="w-16" height="h-16" className="mr-4" />
<div>
<Skeleton width="w-32" height="h-4" className="mb-2" />
<Skeleton width="w-24" height="h-4" />
</div>
</div>
<div className="mb-4">
<Skeleton height="h-8" />
</div>
<div className="grid grid-cols-3 gap-4">
<Skeleton height="h-8" />
<Skeleton height="h-8" />
<Skeleton height="h-8" />
</div>
</div>