Overview

Use to present a placeholder while content is loading.

Preview

Code

import { Skeleton } from '@inpulse-ui/skeleton';

export function Demo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </Preview>
  );
}

About

This component is our take on the Skeleton developed and maintained by Shadcn.

Installation

pnpm

pnpm add @inpulse-ui/skeleton

bun

bun add @inpulse-ui/skeleton

yarn

yarn add @inpulse-ui/skeleton

npm

npm install @inpulse-ui/skeleton

Usage

Use the Skeleton component to create placeholders that mimic the structure of the content being loaded. You can customize the size and shape of the skeleton using Tailwind CSS utility classes.

<Skeleton className="h-4 w-full" />;

Examples

Avatar

Preview

Code

import { Skeleton } from "@inpulse-ui/skeleton";

export function Demo() {
  return (
    <div className="flex items-center space-x-4">
      <div className="h-12 w-12 rounded-full animate-pulse bg-black/10 dark:bg-white/10" />
    </Preview>
  );
}

Paragraph

Preview

Code

import { Skeleton } from "@inpulse-ui/skeleton";

export function Demo() {
  return (
    <div className="flex flex-col space-y-2">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
    </Preview>
  );
}

Card

Preview

Code

import { Skeleton } from "@inpulse-ui/skeleton";

export function Demo() {
  return (
    <div className="flex flex-col space-y-3">
      <div className="h-[125px] w-[250px] rounded-xl animate-pulse bg-black/10 dark:bg-white/10" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </Preview>
  );
}