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
| Medida | HextaUI | shadcn/ui |
|---|---|---|
| Partes exportadas | 1 | 1 |
| Props tratadas pelo wrapper | 7 | 0 |
| Linhas de código | 125 | 22 |
| Dependências do npm | class-variance-authoritycn | cn |
| Construído com | themeuse-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.
| Prop | O que faz |
|---|---|
variantSpinner | Ver a referência da API |
labelSpinner | Ver a referência da API |
animatedSpinner | Pausa a animação sem ocultá-la. |
loadingSpinner | Ativa a exibição com atraso. Omita para sempre mostrar. |
delaySpinner | Ver a referência da API |
minDurationSpinner | Ver a referência da API |
Variantes
| Prop | Em ambos | Só HextaUI | Só shadcn/ui |
|---|---|---|---|
sizeSpinner | – | smdefaultlgxl | – |
A versão do HextaUI
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.