Skip to content

Getting Started

This guide walks you through the first steps with TSkeleton.

Table of Contents

Prerequisites

  • A modern browser with Web Components support (custom elements + shadow DOM). See the Requirements in the README.
  • If you build the library yourself or use the playground: Node.js >= 18 and npm.

1. Install

npm install tskeleton
# or
yarn add tskeleton
# or
pnpm add tskeleton

The package is not published to the npm registry yet. Until it is, install from GitHub:

bash npm install github:rkriad585/TSkeleton

For plain HTML, skip installation and use the CDN bundle:

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

2. Register components

In a bundler-based project, register all components once:

import { registerAll } from 'tskeleton'
registerAll()

The CDN bundle registers everything automatically — no code needed.

To register just one component, import its subpath:

import 'tskeleton/facebook'

3. Add a skeleton to your page

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

Place the tags where you want the loading placeholder to appear. They render a card-like skeleton immediately.

4. Theme it

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

See Configuration for all theming options.

Next steps

Back to README