Zaidan

Command Palette

Search for a command to run...

GitHub

Skeleton

Use to show a placeholder while content is loading.

Installation

CLI

Manual

Install the following dependencies:

Copy and paste the following code into your project.

import type { ComponentProps } from "solid-js";
import { splitProps } from "solid-js";


import { cn } from "~/lib/utils";


const Skeleton = (props: ComponentProps<"div">) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    <div class={cn("z-skeleton animate-pulse", local.class)} data-slot="skeleton" {...others} />
  );
};


export { Skeleton };

Examples

Here are the source code of all the examples from the preview page:

Avatar

import { Skeleton } from "~/components/ui/skeleton";
function SkeletonAvatar() {
  return (
    <Example title="Avatar">
      <div class="flex w-full items-center gap-4">
        <Skeleton class="size-10 shrink-0 rounded-full" />
        <div class="grid gap-2">
          <Skeleton class="h-4 w-[150px]" />
          <Skeleton class="h-4 w-[100px]" />
        </div>
      </div>
    </Example>
  );
}

Card

import { Card, CardContent, CardHeader } from "~/components/ui/card";
import { Skeleton } from "~/components/ui/skeleton";
function SkeletonCard() {
  return (
    <Example title="Card">
      <Card class="w-full">
        <CardHeader>
          <Skeleton class="h-4 w-2/3" />
          <Skeleton class="h-4 w-1/2" />
        </CardHeader>
        <CardContent>
          <Skeleton class="aspect-square w-full" />
        </CardContent>
      </Card>
    </Example>
  );
}

Text

import { Skeleton } from "~/components/ui/skeleton";
function SkeletonText() {
  return (
    <Example title="Text">
      <div class="flex w-full flex-col gap-2">
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-3/4" />
      </div>
    </Example>
  );
}

Form

import { Skeleton } from "~/components/ui/skeleton";
function SkeletonForm() {
  return (
    <Example title="Form">
      <div class="flex w-full flex-col gap-7">
        <div class="flex flex-col gap-3">
          <Skeleton class="h-4 w-20" />
          <Skeleton class="h-10 w-full" />
        </div>
        <div class="flex flex-col gap-3">
          <Skeleton class="h-4 w-24" />
          <Skeleton class="h-10 w-full" />
        </div>
        <Skeleton class="h-9 w-24" />
      </div>
    </Example>
  );
}

Table

import { Skeleton } from "~/components/ui/skeleton";
function SkeletonTable() {
  return (
    <Example title="Table">
      <div class="flex w-full flex-col gap-2">
        <div class="flex gap-4">
          <Skeleton class="h-4 flex-1" />
          <Skeleton class="h-4 w-24" />
          <Skeleton class="h-4 w-20" />
        </div>
        <div class="flex gap-4">
          <Skeleton class="h-4 flex-1" />
          <Skeleton class="h-4 w-24" />
          <Skeleton class="h-4 w-20" />
        </div>
        <div class="flex gap-4">
          <Skeleton class="h-4 flex-1" />
          <Skeleton class="h-4 w-24" />
          <Skeleton class="h-4 w-20" />
        </div>
      </div>
    </Example>
  );
}
PreviewDocs