Getting started

Sixty seconds from npm install to a working skeleton.

1. Install

npm install @kenildev007/skeleto

2. Import the stylesheet (web only)

// app/layout.tsx or _app.tsx
import '@kenildev007/skeleto/styles.css';

3. Wrap your component

import { AutoSkeleton } from '@kenildev007/skeleto';

function UserProfile({ userId }) {
  const { data, isLoading } = useUser(userId);
  return (
    <AutoSkeleton loading={isLoading}>
      <UserCard user={data} />
    </AutoSkeleton>
  );
}

That's it

No fixtures. No CLI. No build step. Try it live below — the skeleton is generated from the same UserCard DOM that's used when loaded.

Show code

<AutoSkeleton loading={loading}>
  <UserCard />
</AutoSkeleton>