Skeleton

Component

Preview

Preview react

Usage

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {
return (
  <div className="flex items-center space-x-4">
    <Skeleton className="h-12 w-12 rounded-full" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
    </div>
  </div>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/skeleton.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/skeleton.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/skeleton.json

Manual

components/ui/skeleton.tsx

import { cva, type VariantProps } from "class-variance-authority"
import { type ComponentProps, forwardRef } from "react"
import { cn } from "@/lib/utils"

const skeletonVariants = cva("animate-pulse rounded-md bg-muted", {
  variants: {
    variant: {
      default: "",
      circular: "rounded-full",
    },
  },
  defaultVariants: {
    variant: "default",
  },
})

export interface SkeletonProps extends ComponentProps<"div">, VariantProps<typeof skeletonVariants> {}

const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, variant, ...props }, ref) => {
    return <div ref={ref} className={cn(skeletonVariants({ variant }), className)} {...props} />
  },
)
Skeleton.displayName = "Skeleton"

export { Skeleton, skeletonVariants }