Getting Started

Choose your framework

Framework	Package	Status
React	`@auto-skeleton/react`	✅ Stable
Next.js	`@auto-skeleton/react`	✅ Stable (see Next.js guide)
Lit / Web Components	`@auto-skeleton/lit`	✅ Stable (see Lit guide)
Vue 3	`@auto-skeleton/vue`	✅ Stable (see Vue guide)
React Native	coming soon	🚧

All packages share the same @auto-skeleton/core scanner and options API. Pick the package for your framework and everything else works the same.

React

Installation

npm install @auto-skeleton/react

Import styles

Add the stylesheet once — typically in your root layout or _app.tsx:

import "@auto-skeleton/react/styles.css";

Quick start

Wrap any component with <AutoSkeleton> and pass a loading boolean:

import { AutoSkeleton } from "@auto-skeleton/react";
import "@auto-skeleton/react/styles.css";
 
function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading } = useUser(userId);
 
  return (
    <AutoSkeleton id="user-profile" loading={isLoading}>
      <div className="profile">
        <img src={data?.avatar} alt="avatar" />
        <h2>{data?.name}</h2>
        <p>{data?.bio}</p>
      </div>
    </AutoSkeleton>
  );
}

When loading is true, the real UI is replaced with a skeleton that mirrors its exact layout. When loading flips back to false, the real content reappears instantly from cache.

How the scan works

On the first non-loading render, auto-skeleton scans the DOM inside <AutoSkeleton>, extracts bone positions, and caches them. Every subsequent loading state shows the skeleton immediately — no layout shift.

The id prop must be unique per <AutoSkeleton> instance on the page. It is used as the cache key.

Lit & Web Components

Installation

npm install @auto-skeleton/lit lit

No stylesheet import needed — styles are encapsulated inside the element's shadow root.

Quick start

import '@auto-skeleton/lit';

<auto-skeleton skeleton-id="user-card" loading>
  <user-card-component></user-card-component>
</auto-skeleton>

Inside a Lit component, use property binding:

html`
  <auto-skeleton skeleton-id="feed" .loading=${this.isLoading}>
    <feed-list></feed-list>
  </auto-skeleton>
`

The scanner traverses Shadow DOM boundaries automatically — nested Lit components are discovered without any extra configuration.

See the Lit & Web Components page for the full guide, including Shadow DOM traversal details, options, and TypeScript types.

Vue 3

Installation

npm install @auto-skeleton/vue

Import styles

import "@auto-skeleton/vue/styles.css";

Quick start

<script setup lang="ts">
import { ref } from "vue";
import { AutoSkeleton } from "@auto-skeleton/vue";
import "@auto-skeleton/vue/styles.css";
 
const loading = ref(true);
</script>
 
<template>
  <AutoSkeleton id="user-profile" :loading="loading">
    <UserProfileCard />
  </AutoSkeleton>
</template>

See the Vue 3 page for the full guide, including the useAutoSkeleton composable, data attributes, theming, and TypeScript types.

How It Works