shadimage

Skeleton

A skeleton loading component with soft variant option

registry/preskok/ui/preskok-ui/skeleton.tsx

"use client"

import type React from "react"
import { twMerge } from "cn"

interface SkeletonProps extends React.ComponentProps<"div"> {
  soft?: boolean
}

const Skeleton = ({
  ref,
  soft = false,
  className,
  ...props
}: SkeletonProps) => {
  return (
    <div
      data-slot="skeleton"
      ref={ref}
      className={twMerge(
        "shrink-0 animate-pulse rounded-lg",
        soft ? "bg-muted" : "bg-secondary",
        className
      )}
      {...props}
    />
  )
}

export { Skeleton }
export type { SkeletonProps }
Visual style
pastel

DependenciesBundle weight · light

cn@^0.2.4