Migrate to v1

Skel UI v1 is a major version update. There are many breaking changes, and sorry about that. However, this version provides an overall better developer experience.

Please follow this guide to upgrade your applications to Skel UI v1.

Upgrade package

npm install @skel-ui/react@latest

Update imports

import Skel from "@skel-ui/react"; 
import * as Skel from "@skel-ui/react";

generatePlaceholder has been moved to a different file.

import { generatePlaceholder } from "@skel-ui/react"; 
import { generatePlaceholder } from "@skel-ui/react/utils";

Update `Skel.Root`

The Root element will not render HTML element anymore.

<Skel.Root className="card">
  ...
</Skel.Root>
 
<Skel.Root>
  <div className="card">
    ...
  </div>
</Skel.Root>

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

Update `Skel.Item`

The Item component will no longer accept HTML elements. It's been change to accept only React components.

<Skel.Item id="card">
<Skel.p id="card">
 
<Skel.Item as="h1">
<Skel.h1>

The radius prop has been changed to sr.

<Skel.p
  radius=""
  sr=""
/>

The children prop will no longer accept function.

<Skel.p>
  {() => <Comp/>} 
  <Comp/>
</Skel.p>

Update CSS variables

Some CSS variables have been changed.

:root{
  --skel-ui-color1: #a1a1aa; 
  --skel-ui-color: #a1a1aa;  
 
  --skel-ui-color2: #e4e4e7; 
  --skel-ui-shimmer-color: #e4e4e7; 
 
}

Some CSS variables has been added to customize the animation timing. Please read here.

Migrate to v1

Upgrade package

Update imports

Update Skel.Root

Update Skel.Item

Update CSS variables

On this page

Update `Skel.Root`

Update `Skel.Item`