// Feedback

Skeleton

Displays a loading state.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/skeleton

// Usage

1import { Skeleton, SkeletonCircle, SkeletonText } from "@/components/ui/skeleton";
2
3<Skeleton />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { cn } from "@/lib/utils";
5
6export const Skeleton = (props: React.ComponentProps<typeof ark.div>) => {
7  const { className, ...rest } = props;
8
9  return (
10    <ark.div
11      className={cn(
12        "rounded-md bg-muted",
13        "animate-pulse",
14        "motion-reduce:animate-none!",
15        className
16      )}
17      data-slot="skeleton"
18      {...rest}
19    />
20  );
21};
22
23export const SkeletonCircle = (props: React.ComponentProps<typeof ark.div>) => {
24  const { className, ...rest } = props;
25
26  return (
27    <ark.div
28      className={cn(

// Dependencies

@ark-ui/react