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 to full.
• height (optional): Height of the skeleton (e.g., h-4, h-8). Defaults to h-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.

• height

  • Type: string
  • Description: Height of the skeleton. Defaults to h-4.

• className

  • Type: string
  • Description: Additional CSS classes to apply to the skeleton.

Use Examples:

Visual:

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>