EstávelFeedbackdesde v0.1.0

Skeleton

Placeholder de carregamento.

Quando usar

Placeholder de carregamento para cards, listas e textos.

Playground

Ajuste props ou edite o código em tempo real (componentes compatíveis).

Controles interativos disponíveis em breve para este componente. Use os exemplos abaixo como referência.

import { Skeleton } from "./skeleton"

export default function App() {
  return (
    <div style={{ width: 280, display: "flex", flexDirection: "column", gap: 8 }}>
      <Skeleton style={{ height: 16, width: "75%" }} />
      <Skeleton style={{ height: 16, width: "100%" }} />
    </div>
  )
}

Open Sandbox

Exemplos

Variações comuns de uso.

Uso básico

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

export function SkeletonDemo() {
  return <Skeleton />
}

API

Props principais documentadas para o time.

Prop	Tipo	Padrão	Descrição
className	string	—	Classes Tailwind para layout e espaçamento.
children	ReactNode	—	Conteúdo interno do componente.

Instalação

pnpm dlx shadcn@latest add http://localhost:3000/r/skeleton.json

pnpm dlx shadcn@latest add @youxgroup/skeleton

Dependências

npm: cn

Relacionados

spinner