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 '$lib/bones/registry'

  let loading = true
</script>

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

3. Generate bones

Option A — Vite plugin (recommended, no second terminal):

vite.config.ts

import { boneyardPlugin } from 'boneyard-js/vite'
import { sveltekit } from '@sveltejs/kit/vite'

export default defineConfig({
  plugins: [sveltekit(), boneyardPlugin()]
})

Option B — CLI:

bash

npx boneyard-js build

4. Import the registry

// Add once in your +layout.svelte or +page.svelte
import '$lib/bones/registry'

This import is required.Without it, skeletons won't render — the Skeleton component needs the registry to resolve bone data by name.

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	'pulse' \| 'shimmer' \| 'solid'	pulse	Animation style (also accepts true/false)
class	string	—	Additional CSS class for the container
stagger	number \| boolean	false	Stagger delay between bones in ms (true = 80ms)
transition	number \| boolean	false	Fade out duration in ms when loading ends (true = 300ms)
boneClass	string	—	CSS class applied to each bone element
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>

Config file

See Install → Config file for the full boneyard.config.json reference. Works with all frameworks.