Textarea: HextaUI y shadcn/ui

El Textarea 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	6	0
Líneas de código	86	17
Dependencias de npm	`@base-ui/react@^1.8.0cn`	`cn`
Construido con	`inputthemeuse-autosizeuse-composed-refuse-invalid-shake`	–

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
`autoResize`Textarea	Crece con el texto en lugar de tener una altura fija.
`minRows`Textarea	Ver la referencia de la API
`maxRows`Textarea	Ver la referencia de la API
`submitOnShortcut`Textarea	Envía el formulario padre con ⌘/Ctrl + Enter.
`shake`Textarea	Vibra cuando el envío de un formulario lo encuentra no válido.

La versión de HextaUI

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Feedback</FieldLabel>
      <Textarea placeholder="What could we do better? Keep typing — the box grows with you." />
      <FieldDescription>Grows with your text, then scrolls.</FieldDescription>
    </Field>
  )
}

Todos los estados, el mapa de teclado y la referencia de la API están en la página del componente.

6 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/textarea.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.

Textarea: HextaUI y shadcn/ui

De un vistazo

Props que añade HextaUI

La versión de HextaUI

Cambia un componente

Otros componentes comparados

Más comparaciones