Alert: HextaUI y shadcn/ui

El Alert 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	5	4
Props que gestiona el envoltorio	10	1
Líneas de código	384	75
Dependencias de npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cn`
Construido con	`buttonmotiontheme`	–

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ú.

Partes

Solo en HextaUIAlertClose

En ambosAlertAlertTitleAlertDescriptionAlertAction

Variantes

Prop	En ambos	Solo HextaUI	Solo shadcn/ui
`variant`Alert	`defaultdestructive`	`successinfowarning`	–
`appearance`Alert	–	`outlinesoft`	–

La versión de HextaUI

Heads up

You can add components to your app using the CLI.

Payment failed

Your card was declined. Update your billing details.

import { IconCircleX, IconTerminal2 } from "@tabler/icons-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertDemo() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Alert>
        <IconTerminal2 />
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>
          You can add components to your app using the CLI.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <IconCircleX />
        <AlertTitle>Payment failed</AlertTitle>
        <AlertDescription>
          Your card was declined. Update your billing details.
        </AlertDescription>
      </Alert>
    </div>
  )
}

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

10 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/alert.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.