Skeleton
Representa temporariamente a estrutura do conteúdo durante o carregamento.
- Status
- Beta
- Distribuição
- Source via shadcn
Design
Preview funcional
Carregando preview funcional…
Explorar anatomia e estados visuais
Anatomia
- Forma de placeholder
Variantes e estados
circlerectangletext
Uso
Quando usar
- a estrutura final é conhecida e o carregamento pode ser percebido.
Quando não usar
- a operação é imediata ou não existe estrutura previsível para representar.
Composição React
import { Skeleton } from "@/components/ui/skeleton"
<div role="status" aria-busy="true" aria-label="Carregando perfil">
<Skeleton variant="circle" />
<Skeleton variant="text" />
</div>Implementação
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/skeletonpnpm dlx shadcn@latest add @tis/skeletonyarn dlx shadcn@latest add @tis/skeletonbunx --bun shadcn@latest add @tis/skeletonContrato público
- Item do registry
@tis/skeleton- Distribuição
- Source copiado para a aplicação
- Status
- Beta
Arquitetura técnica
- Provider
- Apresentação React
- Papel do provider
- Nativo ou composição
- Arquitetura comportamental
- Base UI
- CSS
ds-tis/css
Acessibilidade
Semântica e comportamento
Mantenha Skeleton silencioso com aria-hidden e anuncie o carregamento uma única vez no container.
Responsabilidade do consumidor
- fornecer nomes e descrições acessíveis contextuais;
- preservar teclado, foco visível e HTML semântico;
- testar conteúdo, fluxo e contraste reais na aplicação.
Evidência de validação
Instalado no consumer React/Vite permanente e coberto por build de produção, browser, responsividade e Axe.