Skeleton

PreviewCode

LightStackBlitz ↗StackBlitz ↗StackBlitz ↗

Installation

CLIManual

npmpnpmyarnbun

npx shadcn@latest add @edmi-ui/skeleton

pnpm dlx shadcn@latest add @edmi-ui/skeleton

yarn dlx shadcn@latest add @edmi-ui/skeleton

bunx shadcn@latest add @edmi-ui/skeleton

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

CLIManual

npmpnpmyarnbun

npx shadcn-vue@latest add @edmi-ui/skeleton

pnpm dlx shadcn-vue@latest add @edmi-ui/skeleton

yarn dlx shadcn-vue@latest add @edmi-ui/skeleton

bunx shadcn-vue@latest add @edmi-ui/skeleton

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

CLIManual

npmpnpmyarnbun

npx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/skeleton.json

pnpm dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/skeleton.json

yarn dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/skeleton.json

bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/skeleton.json

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

Usage

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

<div className="flex items-center gap-4">
  <Skeleton className="size-10 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-60" />
    <Skeleton className="h-4 w-44" />
  </div>
</div>

<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton";
</script>

<template>
  <div class="flex items-center gap-4">
    <Skeleton class="size-10 rounded-full" />
    <div class="space-y-2">
      <Skeleton class="h-4 w-60" />
      <Skeleton class="h-4 w-44" />
    </div>
  </div>
</template>

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton";
</script>

<div class="flex items-center gap-4">
  <Skeleton class="size-10 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-60" />
    <Skeleton class="h-4 w-44" />
  </div>
</div>

Component source

registry/ui/skeleton.tsx

import { cn } from "cn";
import type * as React from "react";

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded-[7px] bg-accent", className)}
      {...props}
    />
  );
}

export { Skeleton };

registry/ui/skeleton/Skeleton.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/registry/edmi/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-slot="skeleton"
    :class="cn('animate-pulse rounded-[7px] bg-accent', props.class)"
  >
    <slot />
  </div>
</template>

registry/ui/skeleton/index.ts

export { default as Skeleton } from "./Skeleton.vue";

src/lib/registry/ui/skeleton/skeleton.svelte

<script lang="ts">
  import { cn, type WithElementRef } from "$lib/utils.js";
  import type { HTMLAttributes } from "svelte/elements";

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="skeleton"
  class={cn(
    "animate-pulse rounded-[7px] bg-accent",
    className
  )}
  {...restProps}
>
  {@render children?.()}
</div>

src/lib/registry/ui/skeleton/index.ts

import Root from "./skeleton.svelte";

export {
  Root,
  //
  Root as Skeleton,
};

Expand

API

Prop	Type	Default
className	string	none (size it to the content it stands in for)

✦ Edmi additions

• Fill is --accent, radius 7px; pulses with animate-pulse.