Button: HextaUI e shadcn/ui

O Button 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	19	2
Linhas de código	395	57
Dependências do npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cn`
Construído com	`spinnerthemeuse-button-feedback`	–

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
`feedback`Button	Acompanha a promise retornada de onClick e exibe seu status.
`resetAfter`Button	Milissegundos antes de voltar ao estado idle.
`loadingLabel`Button	Exibido ao lado do spinner. Oculto nos tamanhos de ícone.
`successLabel`Button	Ver a referência da API
`errorLabel`Button	Ver a referência da API

Variantes

Prop	Em ambos	Só HextaUI	Só shadcn/ui
`variant`Button	`defaultoutlinesecondaryghostdestructivelink`	`ghost-destructivesuccesserror`	–
`size`Button	`defaultxssmlgiconicon-xsicon-smicon-lg`	`icon-xl`	–
`shape`Button	–	`defaultpill`	–

A versão do HextaUI

"use client"

import { Button } from "@/components/ui/button"

function wait(ms: number) {
  return new Promise<void>((resolve) => setTimeout(resolve, ms))
}

async function fail(ms: number) {
  await wait(ms)
  throw new Error("Request failed")
}

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Button feedback onClick={() => wait(900)}>
        Save changes
      </Button>
      <Button feedback variant="outline" onClick={() => fail(900)}>
        Request that fails
      </Button>
      <Button feedback variant="secondary" onClick={() => wait(80)}>
        Fast request
      </Button>
    </div>
  )
}

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

15 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/button.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.