Skip to content

TSkeleton

TSkeleton logo

Framework-agnostic, fully customizable loading skeleton Web Components.

TSkeleton is a zero-dependency library of ready-made loading skeleton Web Components inspired by popular apps — Facebook, GitHub, Twitter (X), Instagram, Threads, WhatsApp, TikTok, LinkedIn, Messenger, YouTube, Telegram, Meta Business, MyGP and Google.

Each skeleton is a self-contained custom element with its own shadow DOM and built-in pulse and shimmer animations. Because the components are plain Web Components, they work in any framework (React, Vue, Svelte, Angular) and in plain HTML, via npm or a CDN.

Key Features

  • 24 ready-made skeletons — tags such as <skeleton-facebook>, <skeleton-tiktok> and <skeleton-youtube> cover popular apps out of the box.
  • Framework-agnostic — standard custom elements with open shadow DOM; no Tailwind, CSS framework or runtime dependency required.
  • Zero dependencies — the published package ships no runtime dependencies.
  • Three-level theming — global configure() API, per-instance attributes, and CSS variables with ::part() styling hooks.
  • Tree-shakable subpaths — import tskeleton/facebook to register only that component.
  • Multiple formats — ES, CommonJS and UMD bundles plus a standalone tskeleton.css.
  • SSR-safe — importing the package does not touch HTMLElement or customElements outside the browser.
  • TypeScript — strict-typed with generated declaration files.
  • Live demo playground — npm run dev starts a playground with real-time theme controls.

Quick Start

<script src="https://unpkg.com/tskeleton@0.2.0/dist/tskeleton.umd.cjs"></script>

<skeleton-facebook></skeleton-facebook>
<skeleton-google></skeleton-google>

In a bundler-based project:

import { registerAll } from 'tskeleton'
registerAll()

Documentation

Document Description
Getting Started First steps with TSkeleton
Installation Install via npm, package manager or CDN
Usage Usage in HTML, bundlers and frameworks
API Reference Exports, attributes, CSS variables and parts
Configuration Theming guide
Architecture Project structure and build pipeline
Development Building, testing and publishing locally
Deployment Publishing, container image and CDN distribution
Screenshots Screenshot gallery
FAQ Frequently asked questions
Troubleshooting Common problems and fixes

Requirements

  • A modern browser with Web Components support (custom elements and shadow DOM) — Chrome, Edge, Firefox and Safari, current versions.
  • Node.js >= 18 and npm only if you build the library or run the demo.