Getting Started

Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using react-context.

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";

Start crafting

Now it's time for you to craft your user interface to life!

‌

import Skel from "@skel-ui/react";
import { usePost } from "hooks";
import Image from "@ui/Image";
 
export default function PostCard() {
  const { post, isLoading } = usePost();
 
  return (
    <Skel.Root isLoading={isLoading} className="card">
      <Skel.Item as={Image} src={post?.image as string} radius="0.5rem" className="card-image" />
 
      <Skel.Item as="h1" sw="65%" className="card-title">
        {post?.title}
      </Skel.Item>
 
      <Skel.Item sh="4rem" className="card-content">
        {post?.description}
      </Skel.Item>
 
      <Skel.Item sw="35%" className="card-detail">
        {post?.viewsCount} Views • {post?.likesCount} Likes
      </Skel.Item>
    </Skel.Root>
  );
}

Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the loading state for the entire UI is handled in a single place at <Skel.Root>.

Getting Started

Install package

Import CSS

Start crafting

‌

On this page