Skeleton

Placeholders that wait 150ms before showing, take the exact size of the content they wrap, and fade it in without moving anything.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/skeleton

npx layro-cli add @preetsuthar17/skeleton

npx layro-cli add @preetsuthar17/skeleton

bunx layro-cli add @preetsuthar17/skeleton

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const skeletonVariants = cva(
  "relative overflow-hidden rounded-md bg-muted motion-safe:animate-in motion-safe:animation-duration-300 motion-safe:fade-in-0 motion-safe:fill-mode-backwards motion-safe:[animation-delay:150ms] rtl:[--skeleton-dir:-1] [&:where(span)]:inline-block [&:where(span)]:align-bottom",
  {
    variants: {
      animation: {
        shimmer: