Skelia

Beautiful loading states for every interface.

Skelia helps teams create consistent skeleton loading states across products, frameworks, and platforms. Use the lightweight CSS core directly, or use a framework package that composes the same primitives with typed components.

Choose A Package

Package	Use When	Start	API And Examples
@skelia/core	You want CSS primitives that work in any web app.	Install Core	Usage, Examples, Theming
@skelia/react	You want typed React components over the core CSS system.	Install React	Usage, Components, Examples
@skelia/vue	You want typed Vue components over the core CSS system.	Install Vue	Usage, Components, Examples
@skelia/svelte	You want typed Svelte components over the core CSS system.	Install Svelte	Usage, Components, Examples

Quick Start

Core CSS

npm install @skelia/core

import "@skelia/core/index.css";

React

npm install @skelia/react

import "@skelia/react/styles.css";
import { Skeleton, SkeletonAvatar, SkeletonLine } from "@skelia/react";

Vue

npm install @skelia/vue

import "@skelia/vue/styles.css";

<script setup lang="ts">
import { Skeleton, SkeletonAvatar, SkeletonLine } from "@skelia/vue";
</script>

Svelte

npm install @skelia/svelte

<script lang="ts">
  import "@skelia/svelte/styles.css";
  import { Skeleton, SkeletonAvatar, SkeletonLine } from "@skelia/svelte";
</script>

Accessibility

Skeletons are visual placeholders. Put aria-busy="true" on the loading region, add short loading text with sk-sr-only, and leave visual skeleton shapes hidden from assistive technology.

• Core accessibility
• React accessibility
• Vue accessibility
• Svelte accessibility