Spinner: HextaUI y shadcn/ui

El Spinner de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

Medida	HextaUI	shadcn/ui
Partes exportadas	1	1
Props que gestiona el envoltorio	7	0
Líneas de código	125	22
Dependencias de npm	`class-variance-authoritycn`	`cn`
Construido con	`themeuse-delayed-loading`	–

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Props que añade HextaUI

Props que gestiona el propio envoltorio de HextaUI y el de shadcn/ui no. Se omiten las props que pasan directamente a Base UI o a la librería subyacente, porque ambas versiones las aceptan.

Prop	Qué hace
`variant`Spinner	Ver la referencia de la API
`label`Spinner	Ver la referencia de la API
`animated`Spinner	Pausa la animación sin ocultarla.
`loading`Spinner	Activa la visualización retrasada. Omítelo para mostrarlo siempre.
`delay`Spinner	Ver la referencia de la API
`minDuration`Spinner	Ver la referencia de la API

Variantes

Prop	En ambos	Solo HextaUI	Solo shadcn/ui
`size`Spinner	–	`smdefaultlgxl`	–

La versión de 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 los estados, el mapa de teclado y la referencia de la API están en la página del componente.

4 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

pnpm dlx shadcn@latest add https://hextaui.com/r/spinner.json --overwrite

Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.