Components

Skel UI has two components. The `Root` component manages the loading state, while the `Item` component handles the rendering.

Root

This component handles the loading state of all child Item components.

import Skel from "@skel-ui/react";
 
function PostCard() {
  return (
    <Skel.Root isLoading={isLoading}>
      {/* Build your component here */}
    </Skel.Root>
  );
}

Props

Name	Type	Default	Description
`as`	`ElementType`	`'div'`	HTML tag to render
`isLoading`	`boolean`	`true`	Show the loading skeleton if `true`.

Custom tag

To render custom HTML tag, please use as property.

<Skel.Root
  as="ul"
>
  ...
</Skel.Root>

Item

Takes the loading state from nearest Root component and render the UI accordingly.

import Skel from "@skel-ui/react";
 
function Demo() {
  return (
    <Skel.Root isLoading={isLoading}>
      <Skel.Item>...</Skel.Item>
    </Skel.Root>
  );
}

Props

Name	Type	Default	Description
`as`	`ElementType`	`'p'`	HTML tag or React component to render
`sw`	`string`	-	Width of the skeleton
`sh`	`string`	-	Height of the skeleton
`radius`	`string`	-	Overrides the default skeleton border-radius
`children`	`ReactNode \| (() => ReactNode)`	-

Custom tag

To render custom HTML tag, please use as property.

<Skel.Item
  as="a"
  href="https://skel-ui.augustin.zip"
>
  ...
</Skel.Item>

Custom component

When you pass a component, all of its props can be passed through Item component.

import Image from "next/image";
 
<Skel.Item
  as={Image}
  src="..."
  quality={85} 
  className="....."
/>;

Note: If you pass a react component into as, Skel UI will render a empty div instead of that component while loading to avoid unexpected bahaviours.

Function as children

This pattern is useful to avoid rendering performance-intensive components while loading.

function Demo() {
  const { user, isLoading } = useProfile();
 
  return (
    <Skel.Root isLoading={isLoading}>
      <Skel.Item>
        <IntenseComponent />
      </Skel.Item>
    </Skel.Root>
  );
}

In the above code, the IntenseComponent will be rendered twice. To avoid this we can wrap that component in a function like below.

function Demo() {
  const { user, isLoading } = useProfile();
 
  return (
    <Skel.Root isLoading={isLoading}>
      <Skel.Item>
        {/* This function get executed only once after loading is done */}
        {() => <IntenseComponent />}
      </Skel.Item>
    </Skel.Root>
  );
}

Components

On this page