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 "../../../src";
import { usePost } from "../../hooks";
import Image from "../Image";
 
type Props = {
  isLoading?: boolean;
};
 
export default function PostCard(props: Props) {
  const { post, isLoading } = usePost();
 
  return (
    <Skel.Root isLoading={props.isLoading !== undefined ? props.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>.

Next

Components

On this page

Install packageImport CSSStart crafting