Svelte

Use boneyard in SvelteKit and Svelte 5 apps. Same pixel-perfect skeletons, same CLI — native Svelte component with snippets.

Quick start

1. Install

bash

npm install boneyard-js

2. Wrap your components

src/routes/+page.svelte

<script>
  import Skeleton from 'boneyard-js/svelte'
  import '../bones/registry'

  let loading = true
</script>

<Skeleton name="profile-card" {loading}>
  <ProfileCard />
</Skeleton>

3. Generate bones

bash

npx boneyard-js build

The CLI auto-detects your SvelteKit dev server and captures all named skeletons.

4. Import the registry

// Add once in your layout or entry
import './bones/registry'

How it works

The Svelte component works identically to the React version under the hood. The CLI visits your running SvelteKit app in a headless browser, finds all <Skeleton name="..."> components, and snapshots their layout at each breakpoint. The bone data format is the same across all frameworks.

The Svelte adapter is a .svelte file that uses Svelte 5 snippets for children and fallback content. It reads from the same bone registry and uses the same CSS keyframe animations as the React version.

Props

Prop	Type	Default	Description
loading	boolean	—	Show skeleton or children
name	string	—	Resolve bones from registry by name
initialBones	ResponsiveBones	—	Pass bones directly
color	string	rgba(0,0,0,0.08)	Bone color in light mode
darkColor	string	rgba(255,255,255,0.06)	Bone color in dark mode
animate	boolean	true	Enable pulse animation
class	string	—	Additional CSS class for the container
fallback	Snippet	—	Shown when loading but no bones available

Dark mode

Detects prefers-color-scheme: dark and a .dark ancestor class automatically — same as the React version.

Snippets (fallback & fixture)

Svelte 5 snippets replace slots. Use fallback for a custom loading state when no bones are available, and fixture for mock content during bone generation:

svelte

<Skeleton name="card" {loading}>
  <!-- Default slot: your real component -->
  <Card {data} />

  <!-- Fallback: shown while loading if no bones -->
  {#snippet fallback()}
    <p>Loading...</p>
  {/snippet}

  <!-- Fixture: mock content for CLI capture -->
  {#snippet fixture()}
    <Card data={mockData} />
  {/snippet}
</Skeleton>