Um framework de skeleton loading que gera telas de carregamento pixel-perfect a partir da sua UI real, sem medições manuais ou placeholders ajustados à mão, para React, Preact, Vue, Svelte 5, Angular e React Native.
Boneyard gera automaticamente telas de skeleton loading pixel-perfect extraindo o layout da sua UI real. Uma CLI ou plugin do Vite abre um navegador headless, captura componentes `Skeleton` nomeados em múltiplos breakpoints e gera um arquivo `.bones.json`. Suporta React, Preact, Vue, Svelte 5, Angular e React Native.
Boneyard gera telas de skeleton loading pixel-perfect extraídas da sua UI real, sem medições manuais ou placeholders ajustados à mão. Você envolve o conteúdo em um componente <Skeleton name="...">, e uma CLI (ou plugin do Vite) abre um navegador headless, visita seu app, encontra cada skeleton nomeado e captura o layout em múltiplos breakpoints em um arquivo .bones.json multiplataforma. Em tempo de execução, o skeleton é renderizado enquanto os dados carregam e então faz uma transição suave para o conteúdo real. Funciona com React, Preact, Vue, Svelte 5, Angular e React Native, e se integra ao React Suspense via boundary BoneSuspense.
É altamente configurável: animações pulse, shimmer ou solid, cores de bone para modo claro e escuro, transições de stagger e fade-out, breakpoints personalizados, modo watch que recaptura a cada HMR, e um caminho para React Native que percorre a fiber tree para medir views no dispositivo com zero overhead em produção. O Dynamic Type é tratado automaticamente ajustando as posições dos bones ao tamanho de texto do usuário. Instale boneyard-js pelo npm; licença MIT.
Notas de campo
Revisado em Jun 21, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Custo
Gratuito e de código aberto (MIT).
Ferramentas usadas
Um framework que gera telas de skeleton loading pixel-perfect capturando o layout dos seus componentes reais, eliminando a necessidade de medir ou ajustar placeholders manualmente.
Uma CLI ou plugin do Vite abre um navegador headless, visita seu app, encontra cada `Skeleton` nomeado e captura o layout em múltiplos breakpoints em um arquivo `.bones.json`; no React Native, as views são medidas no dispositivo em modo de desenvolvimento.
React, Preact, Vue, Svelte 5, Angular e React Native, todos produzindo o mesmo formato bones multiplataforma.
Uma coleção de spinners, loaders e animações de carregamento para aplicações web modernas, construída com React, Next.js, shadcn/ui, Tailwind CSS e Framer Motion.
Best for Adicionar spinners e animações de carregamento rapidamenteUma coleção interativa de transições CSS reutilizáveis e prontas para copiar, incluindo redimensionamento de cards, animações de modais e menus, pop de badges e muito mais, cada uma emitindo um snippet autocontido com um guard de reduced-motion.
Best for Adicionar micro-interações refinadas sem uma biblioteca de motionUma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável pelo registro do shadcn ou copiando o código-fonte direto da documentação.
Best for Loaders com estilo dotmatrix distintoUma coleção de layouts de UI open-source criados com cuidado usando Next.js e shadcn/ui, incluindo dashboards, trackers e templates de aplicativos com demos ao vivo, disponíveis nas variantes Radix UI e Base UI.
Best for Iniciar uma UI de aplicativo a partir de um layout realista e completoOpen-source brand SVG icon library with 6,149+ typed, tree-shakeable icons for developers and designers.
Best for Apps that display third-party brand logos and want a single versioned npm dependencyVisual RAG pipeline that retrieves over screenshot tiles instead of parsed text, preserving tables, charts, and layout for more accurate document search.
Best for Builders doing RAG over documents where tables, charts, or layout carry meaning that HTML parsing silently drops