Skeleton

Component

Preview

Preview solid

Usage

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

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

Installation

CLI

npm

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

pnpm

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

bun

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

Manual

components/ui/skeleton.tsx

import { cva, type VariantProps } from "class-variance-authority"
import { type ComponentProps, splitProps } from "solid-js"
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> {}

export const Skeleton = (props: SkeletonProps) => {
  const [local, rest] = splitProps(props, ["class", "variant"])

  return <div class={cn(skeletonVariants({ variant: local.variant }), local.class)} {...rest} />
}

export { skeletonVariants }