componentes / feedback
Skeleton
Reserve o espaço do conteúdo enquanto ele carrega.
234 B gzip roda no servidor · 0 JS
skeleton-default.tsx
import { Skeleton } from "@/components/ui/skeleton";
export default function SkeletonDefault() {
return (
<div className="flex w-full max-w-xs items-center gap-3">
<Skeleton className="size-11 rounded-xl" />
<div className="flex flex-1 flex-col gap-2">
<Skeleton className="h-3.5 w-3/4" />
<Skeleton className="h-3.5 w-1/2" />
</div>
</div>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/skeleton.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-4 w-40" />API
Skeleton
Bloco com pulso lento. Defina o tamanho com classes. Componente de servidor.
| prop | tipo | padrão |
|---|---|---|
classNameClasses extras, mescladas com | string | - |
Acessibilidade
- É
aria-hidden: anuncie o carregamento em outro lugar (ex.:aria-busyno contêiner).