Skeleton: HextaUI e shadcn/ui

O Skeleton do HextaUI mantém os nomes e tokens de tema do shadcn/ui e instala com a mesma CLI. Esta página lista o que muda, lido do código de ambos. O lado do shadcn/ui é o registro base-vega em 2026-10-16.

Visão geral

MedidaHextaUIshadcn/ui
Partes exportadas21
Props tratadas pelo wrapper50
Linhas de código13813
Dependências do npm@base-ui/react@^1.8.0class-variance-authoritycncn
Construído comtheme–

Mais código não é melhor por si só. A maior parte das linhas extras do HextaUI cuida de estados, animações e casos extremos que você escreveria por conta própria.

Partes

Só no HextaUISkeletonText

Em ambosSkeleton

Props que o HextaUI adiciona

Props que o próprio wrapper do HextaUI trata e o do shadcn/ui não. Props repassadas direto ao Base UI ou à biblioteca por baixo ficam de fora, porque as duas versões as aceitam.

PropO que faz
linesSkeletonTextArredondado para baixo e mantido entre 1 e 50.
animationSkeletonTextVer a referência da API

Variantes

PropEm ambosSó HextaUISó shadcn/ui
animationSkeleton–shimmerpulsenone–

A versão do HextaUI

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

export function SkeletonDemo() {
  return (
    <div className="flex w-full max-w-sm items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-4 w-3/5" />
        <Skeleton className="h-4 w-4/5" />
      </div>
    </div>
  )
}

Todos os estados, o mapa de teclado e a referência da API estão na página do componente.

8 dos seus exemplos também têm uma página própria.

Troque um componente

Rode o comando add com --overwrite para substituir o arquivo do shadcn/ui em @/components/ui e revise o diff no git antes de mantê-lo. Os imports continuam iguais e os componentes que você não trocar seguem funcionando.

pnpm dlx shadcn@latest add https://hextaui.com/r/skeleton.json --overwrite
  • Cada prop da tabela acima é nova, então o código escrito para o shadcn/ui ainda não a passa.
  • Antes de trocar, confira qualquer parte ou variante listada só para o shadcn/ui e associe-a à mais próxima do HextaUI.

Outros componentes comparados

Mais comparações