Skeleton

Des blocs de remplacement pendant un chargement, et un spinner.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

skeleton.tsx

'use client';import { Skeleton } from '@/components/ui/skeleton';import { Spinner } from '@/components/ui/spinner';export default function Demo() {  return (    <div className="flex items-center gap-4">      <Skeleton className="size-12 rounded-full" />      <div className="flex flex-col gap-2">        <Skeleton className="h-4 w-48" />        <Skeleton className="h-4 w-32" />      </div>      <Spinner />    </div>  );}

Animation

La pulsation (opacité) et le spinner (0,8 s) passent à un état statique ou plus doux sous prefers-reduced-motion.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add skeleton

Ou depuis le paquet npm :

import { Skeleton } from '@whoa-studio/ui/skeleton';

Exports : Skeleton, Spinner.