Getting Started

Integrate skeletons into your project quickly and easily using Skel UI in minutes.

Install package

Install Skel UI into your project via command line.

npm install @skel-ui/react

Import CSS

Import the CSS file into the root of your application.

import "@skel-ui/react/styles.css";

Implement Skel UI

Consider a PostCard component that shows a spinner while the data is being fetched.

import Image from "@ui/Image";
import Spinner from "@ui/Spinner";
 
export default function PostCard() {
  const { post, isLoading } = usePost();
 
  return isLoading ? (
    <div className="w-80 h-80 flex flex-center">
      <Spinner />
    </div>
  ) : (
    <div className="group w-full max-w-80 p-2.5 bg-white border border-slate-200 rounded-lg overflow-hidden duration-300">
      <Image src={post?.image} className="rounded aspect-[800/530] duration-150 group-hover:scale-110" />
      <h1 className="text-xl font-bold mt-4">{post?.title}</h1>
      <p className="text-sm my-2">{post?.description}</p>
    </div>
  );
}

Let's replace the spinner loading with skeleton loading. To accomplish this, just follow two steps:

Replace the ternary operator with <Skel.Root>.
Substitute your HTML elements with Skel UI elements (e.g., h1 becomes Skel.h1).


import * as Skel from "@skel-ui/react";
import Image from "@ui/image";
 
export default function PostCard() {
  const { post, isLoading } = usePost();
 
  return (
    <Skel.Root isLoading={isLoading}>
      <div className="group w-full max-w-80 p-2.5 bg-white border border-slate-200 rounded-lg overflow-hidden duration-300">
        <Skel.Item
          as={Image}
          src={post?.image}
          className="rounded aspect-[800/530] duration-150 loaded:group-hover:scale-110"
        />
        <Skel.h1 className="text-xl font-bold mt-4 loading:max-w-48">{post?.title}</Skel.h1>
        <Skel.p className="text-sm my-2 loading:h-[3.75rem]">{post?.description}</Skel.p>
      </div>
    </Skel.Root>
  );
}

Getting Started

Install package

Import CSS

Implement Skel UI

‌

On this page