API Reference

TSkeleton exposes a small JavaScript API from the package root and a set of custom elements. All APIs are verified against src/core.ts, src/register.ts and src/index.ts.

Exports

From tskeleton (package root):

import {
  registerAll,
  defineSkeleton,
  configure,
  SkeletonBase,
  SKELETON_CSS,
} from 'tskeleton'

import type { SkeletonVariant, TSkeletonTheme } from 'tskeleton'

Each component class is also exported from the root (for example FacebookSkeleton, TikTokForYouSkeleton, BonusSkeleton) and from its own subpath:

import { FacebookSkeleton } from 'tskeleton/facebook'

registerAll()

registerAll(): void

Registers every one of the 24 <skeleton-*> custom elements. Idempotent — calling it more than once is safe because duplicate definitions are ignored by defineSkeleton().

import { registerAll } from 'tskeleton'
registerAll()

defineSkeleton()

defineSkeleton(name: string, ctor: typeof HTMLElement): void

Registers a single custom element under name. No-ops outside browsers (where customElements is undefined, for example during SSR) and for already-registered names.

import { defineSkeleton, SkeletonBase } from 'tskeleton'

class MySkeleton extends SkeletonBase {
  render() {
    return `<div class="sk sk-h-4 sk-w-50"></div>`
  }
}

defineSkeleton('skeleton-mine', MySkeleton)

configure()

configure(theme: TSkeletonTheme): void

Applies a global default theme by setting CSS custom properties on :root. Individual elements override these via their own attributes or inline styles. No-op outside browsers (SSR-safe).

configure({
  color: '#e5e7eb',
  colorDark: '#d1d5db',
  colorLight: '#f3f4f6',
  highlight: 'rgba(255,255,255,.6)',
  radius: '4px',
  duration: '2s',
  cardBg: '#ffffff',
  cardRadius: '8px',
})

SkeletonBase

abstract class SkeletonBase extends HTMLElement

Base class for every skeleton Web Component. Subclasses must implement render(): string, which returns the template string inserted into the open shadow root together with the shared SKELETON_CSS stylesheet.

Provided members:

protected abstract render(): string — returns the component template.
connectedCallback() — attaches the shadow root (once) and applies theme attributes.
attributeChangedCallback() — applies variant and theme attributes live.
static get observedAttributes() — returns ['color', 'color-dark', 'color-light', 'highlight', 'radius', 'duration', 'card-bg', 'card-radius', 'variant'].

Custom subclasses inherit all theming behavior automatically. Outside the browser the class falls back to a plain class, so importing the library is SSR-safe.

import { defineSkeleton, SkeletonBase } from 'tskeleton'

class MySkeleton extends SkeletonBase {
  render() {
    return `
      <div class="sk-card sk-p-4 sk-flex sk-gap-3">
        <div class="sk sk--circle sk-w-12 sk-h-12"></div>
        <div class="sk-flex-1">
          <div class="sk sk-h-4 sk-w-50 sk-mb-2"></div>
          <div class="sk sk-h-3 sk-w-75"></div>
        </div>
      </div>`
  }
}

defineSkeleton('skeleton-mine', MySkeleton)

SKELETON_CSS

SKELETON_CSS: string

The shared skeleton stylesheet: base block styles, pulse and shimmer keyframes, cards, flex/grid helpers, sizing and spacing utilities. Used by SkeletonBase inside the shadow root. The same stylesheet is also shipped as a standalone file at dist/tskeleton.css (importable as tskeleton/styles.css or tskeleton/tskeleton.css).

Types

SkeletonVariant — 'pulse' | 'shimmer' | 'none'.
TSkeletonTheme — optional theming fields: color, colorDark, colorLight, highlight, radius, duration, cardBg, cardRadius (all string).

Component classes

Component	Export	Tag
Facebook	`FacebookSkeleton`	`<skeleton-facebook>`
GitHub	`GitHubSkeleton`	`<skeleton-github>`
Twitter / X	`TwitterSkeleton`	`<skeleton-twitter>`
Instagram	`InstagramSkeleton`	`<skeleton-instagram>`
Threads	`ThreadsSkeleton`	`<skeleton-threads>`
WhatsApp	`WhatsAppSkeleton`	`<skeleton-whatsapp>`
TikTok	`TikTokSkeleton`	`<skeleton-tiktok>`
LinkedIn	`LinkedInSkeleton`	`<skeleton-linkedin>`
TikTok For You	`TikTokForYouSkeleton`	`<skeleton-tiktok-foryou>`
TikTok Profile	`TikTokProfileSkeleton`	`<skeleton-tiktok-profile>`
TikTok Chats	`TikTokChatsSkeleton`	`<skeleton-tiktok-chats>`
Messenger	`MessengerSkeleton`	`<skeleton-messenger>`
Facebook Profile	`FacebookProfileSkeleton`	`<skeleton-facebook-profile>`
Facebook Settings	`FacebookSettingsSkeleton`	`<skeleton-facebook-settings>`
YouTube	`YouTubeSkeleton`	`<skeleton-youtube>`
YouTube Reels	`YouTubeReelsSkeleton`	`<skeleton-youtube-reels>`
YouTube Subs	`YouTubeSubsSkeleton`	`<skeleton-youtube-subs>`
Telegram	`TelegramSkeleton`	`<skeleton-telegram>`
Telegram Profile	`TelegramProfileSkeleton`	`<skeleton-telegram-profile>`
Meta Business	`MetaBusinessSkeleton`	`<skeleton-meta-business>`
YouTube Studio	`YouTubeStudioSkeleton`	`<skeleton-yt-studio>`
MyGP	`MyGPSkeleton`	`<skeleton-mygp>`
Google	`GoogleSkeleton`	`<skeleton-google>`
Bonus	`BonusSkeleton`	`<skeleton-bonus>`

Theming attributes

Every <skeleton-*> element accepts the attributes below. Each maps to a CSS custom property on the host element, so they win over configure() and CSS variables. Changes apply live via attributeChangedCallback.

Attribute	CSS variable	Default	Description
`variant`	—	`pulse`	Animation: `pulse`, `shimmer` or `none`
`color`	`--sk-color`	`#e5e7eb`	Base skeleton block color
`color-dark`	`--sk-color-dark`	`#d1d5db`	Darker blocks
`color-light`	`--sk-color-light`	`#f3f4f6`	Lighter blocks
`highlight`	`--sk-highlight`	`rgba(255,255,255,.6)`	Shimmer sweep color
`radius`	`--sk-radius`	`4px`	Block border radius
`duration`	`--sk-duration`	`2s`	Pulse/shimmer animation duration
`card-bg`	`--sk-card-bg`	`#ffffff`	Card background
`card-radius`	`--sk-card-radius`	`8px` / `12px`	Card border radius

<skeleton-facebook
  variant="shimmer"
  color="#f43f5e"
  color-dark="#fb7185"
  color-light="#ffe4e6"
  duration="1.2s"
></skeleton-facebook>

CSS variables

Components live in shadow DOM but inherit CSS custom properties, so you can set them on any ancestor:

skeleton-facebook {
  --sk-color: #e5e7eb;
  --sk-color-dark: #d1d5db;
  --sk-color-light: #f3f4f6;
  --sk-highlight: rgba(255, 255, 255, 0.6);
  --sk-radius: 4px;
  --sk-duration: 2s;
  --sk-card-bg: #ffffff;
  --sk-card-radius: 8px;
}

CSS parts

Every meaningful block in the built-in templates exposes a CSS part so you can style specific pieces from outside the shadow DOM:

Part	Applies to
`card`	The outer card container
`avatar`	Circular profile/avatar blocks
`media`	Large image / thumbnail / cover blocks
`shimmer`	Blocks with the shimmer effect
`line`	Text-line blocks (titles, body lines)

skeleton-facebook::part(card) { box-shadow: none; }
skeleton-facebook::part(avatar) { border-radius: 12px; }
skeleton-facebook::part(line) { opacity: 0.6; }

Back to README