🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Skeleton

Skeleton component for the Simpson Strong-Tie design system.

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`	`"pulse" \| "shimmer" \| "wave" \| "none" \| null`	`'none'`	The animation style applied to the skeleton.

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.

Base Class

skeleton

Variants

animation (default: none)

Value	Classes
`pulse`	`-pulse`
`shimmer`	`-shimmer`
`wave`	`-wave`
`none`	`(none)`

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Sidebar Slider

On This Page

Example Installation Props <Skeleton>Examples Animations Styling Base Class Variants Accessibility

Contribute