Usage

TSkeleton components are standard custom elements, so the same markup works in plain HTML and in every framework.

Plain HTML and CDN

Load the UMD bundle once — it registers every component automatically:

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

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

The global TSkeleton object exposes registerAll, SkeletonBase, configure, SKELETON_CSS and every component class.

You can also load the stylesheet directly:

<link rel="stylesheet" href="https://unpkg.com/tskeleton@0.2.0/dist/tskeleton.css">

Bundler projects (Vite, webpack, Rollup)

import { registerAll } from 'tskeleton'
registerAll()

<skeleton-github></skeleton-github>

registerAll() is idempotent, so it is safe to call from every component that renders a skeleton.

Register a single component

Import a subpath to register only that component (tree-shaking friendly). The import registers the tag as a side effect:

import 'tskeleton/facebook' // registers <skeleton-facebook>
import { FacebookSkeleton } from 'tskeleton/facebook'

The same pattern applies to all 24 subpaths (tskeleton/tiktok, tskeleton/youtube, tskeleton/bonus, …).

React

import { useEffect } from 'react'
import { registerAll } from 'tskeleton'

export default function Loading() {
  useEffect(() => { registerAll() }, [])
  return <skeleton-facebook />
}

Vue

<script setup>
import { onMounted } from 'vue'
import { registerAll } from 'tskeleton'
onMounted(() => registerAll())
</script>

<template>
  <skeleton-youtube />
</template>

Custom skeletons

Extend SkeletonBase and implement render(). Custom skeletons inherit all theming behavior (attributes, CSS variables, ::part() and variant):

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)

Back to README