Input: HextaUI e shadcn/ui

O Input 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	2	1
Props tratadas pelo wrapper	8	1
Linhas de código	185	19
Dependências do npm	`@base-ui/react@^1.8.0class-variance-authoritycn`	`cn`
Construído com	`motionnumber-flowthemeuse-autosizeuse-composed-refuse-invalid-shakeuse-merged-ref`	–

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 HextaUIInputCount

Em ambosInput

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
`htmlSize`Input	O atributo nativo size, renomeado porque size é a variant.
`shake`Input	Balança uma vez quando o envio de um formulário encontra este input inválido. Funciona com validação nativa, o Field do Base UI e bibliotecas que definem aria-invalid. Ignorado com movimento reduzido.
`threshold`InputCount	Ver a referência da API
`announcement`InputCount	Ver a referência da API

Variantes

Prop	Em ambos	Só HextaUI	Só shadcn/ui
`size`Input	–	`smdefaultlg`	–

A versão do HextaUI

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function InputDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-demo-email">Email</Label>
      <Input
        id="input-demo-email"
        type="email"
        autoComplete="email"
        placeholder="[email protected]"
      />
    </div>
  )
}

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

13 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/input.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.