Spinner: HextaUI e shadcn/ui

O Spinner 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 exportadas11
Props tratadas pelo wrapper70
Linhas de código12522
Dependências do npmclass-variance-authoritycncn
Construído comthemeuse-delayed-loading–

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.

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
variantSpinnerVer a referência da API
labelSpinnerVer a referência da API
animatedSpinnerPausa a animação sem ocultá-la.
loadingSpinnerAtiva a exibição com atraso. Omita para sempre mostrar.
delaySpinnerVer a referência da API
minDurationSpinnerVer a referência da API

Variantes

PropEm ambosSó HextaUISó shadcn/ui
sizeSpinner–smdefaultlgxl–

A versão do HextaUI

import { Spinner } from "@/components/ui/spinner"

export function SpinnerDemo() {
  return (
    <div className="flex items-center gap-10">
      <Spinner size="xl" />
      <Spinner size="xl" variant="ring" />
    </div>
  )
}

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

4 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/spinner.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