Sai-UI

Skeleton

It is a kind of placeholder for your data when your data is loading. Skeleton layout are used widely as they are much better than old orthodox spinners or loaders.

Usage

It can be directly used in your component. Example :

 
  <Skeleton variant="text" width={"6"} />

Variants


  <Skeleton variant={"text"} />
  <Skeleton variant={"circle"} width={"10"} height={"10"} />
  <Skeleton variant={"rectangle"} width={"10"} height={"8"} />

Custom Layouts


  <div className="flex flex-col gap-3">
    <Skeleton
      variant={"rectangle"}
      customStyles={{
        width: "12rem",
        height: "6rem",
      }}
    />
    <Skeleton
      variant={"text"}
      customStyles={{
        width: "12rem",
      }}
    />
    <Skeleton
      variant={"text"}
      customStyles={{
        width: "12rem",
      }}
    />
    <Skeleton
      variant={"text"}
      customStyles={{
        width: "6rem",
      }}
    />
  </div>


  <div className="flex gap-2 ">
    <div className="">
      <Skeleton variant={"circle"} width={"6"} height={"6"} />
    </div>
    <div className=" flex flex-col h-full gap-2 mt-2">
      <Skeleton
        variant={"text"}
        customStyles={{
          width: "15rem",
        }}
      />
      <Skeleton
        variant={"text"}
        customStyles={{
          width: "15rem",
        }}
      />
      <Skeleton
        variant={"text"}
        customStyles={{
          width: "7rem",
        }}
      />
    </div>
  </div>

Props

Props for Skeleton components are:

Name	Type	Description
Width	String	For specifying width
Height	String	For specifying Height
customStyles	Object	They are used for styling the component they will override the current styles
customClasses	String	This prop is used for giving custom classes to style the component
Variant	String	This is used to tell which variant of Skeleton is to be used. Available variants are : "text" , "circle","rectangle"

Name

Type

Description

Width

String

For specifying width

Height

String

For specifying Height

customStyles

Object

They are used for styling the component they will override the current styles

customClasses

String

This prop is used for giving custom classes to style the component

Variant

String

This is used to tell which variant of Skeleton is to be used. Available variants are : "text" , "circle","rectangle"