Skeleton

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>
  )
}

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

Prop

Type

Default

Description

animation

none | pulse | shimmer | wave

pulse

When not to use it

Don't use a skeleton for loads that finish almost instantly or for indeterminate background work — a brief flash of placeholder is more distracting than helpful. Use a spinner for short, in-place waits and reserve skeletons for content-shaped areas that take long enough to justify a layout preview.

Examples

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>
  )
}

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>
  )
}

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

Prop

Type

Default

Description

animation

none | pulse | shimmer | wave

pulse

When not to use it

Examples

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>
  )
}

Skeleton

Example

Install

Props

`<Skeleton>`

When not to use it

Examples

Animations

Skeleton

Example

Install

Props

`<Skeleton>`

When not to use it

Examples

Animations