Skeleton

Skeleton is a placeholder component that indicates content is loading.

Skeletons provide visual feedback during loading states by displaying placeholder shapes that mimic the structure of the content being loaded. They help reduce perceived loading time and improve the user experience by giving users a preview of what's coming and maintaining visual stability during data fetching. Skeletons create a smoother, more polished loading experience compared to blank spaces or generic spinners, especially for content-heavy interfaces.

Use skeletons when loading content that has a predictable structure, such as lists, cards, or profiles. They work best when they closely match the shape and layout of the actual content, helping users mentally prepare for what they're about to see. Skeletons should be replaced with real content as quickly as possible and can be combined with subtle animations to indicate ongoing loading activity.

Example

"use client"

import { Skeleton } from "@strongtie/design-system/skeleton"

export function SkeletonDefault() {
  return (
    <div className="flex w-8/12 flex-col gap-3">
      <Skeleton className="h-12 w-full" />
      <Skeleton className="h-12 w-full" />
      <Skeleton className="h-12 w-full" />
    </div>
  )
}

Installation


npm install @strongtie/design-system

import { Skeleton } from "@strongtie/design-system/skeleton"

Props

`<Skeleton>`

Prop	Type	Default	Description
`animation`	`none` \| `pulse` \| `shimmer` \| `wave`	`pulse`

Examples

"use client"

import { Skeleton } from "@strongtie/design-system/skeleton"

export function SkeletonDefault() {
  return (
    <div className="flex w-8/12 flex-col gap-3">
      <Skeleton className="h-12 w-full" />
      <Skeleton className="h-12 w-full" />
      <Skeleton className="h-12 w-full" />
    </div>
  )
}

Animations

Pulse

Shimmer

Wave

None

"use client"

import { Skeleton } from "@strongtie/design-system/skeleton"

export function SkeletonAnimations() {
  return (
    <div className="flex w-8/12 flex-col gap-4">
      <div className="space-y-2">
        <p className="text-sm font-medium">Pulse</p>
        <Skeleton animation="pulse" className="h-12 w-full" />
      </div>
      <div className="space-y-2">
        <p className="text-sm font-medium">Shimmer</p>
        <Skeleton animation="shimmer" className="h-12 w-full" />
      </div>
      <div className="space-y-2">
        <p className="text-sm font-medium">Wave</p>
        <Skeleton animation="wave" className="h-12 w-full" />
      </div>
      <div className="space-y-2">
        <p className="text-sm font-medium">None</p>
        <Skeleton animation="none" className="h-12 w-full" />
      </div>
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

skeleton

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Sidebar Slider

On This Page

Example Installation Props <Skeleton>Examples Animations Styling Classes Accessibility

Contribute