Dialog: HextaUI e shadcn/ui

O Dialog 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	11	10
Props tratadas pelo wrapper	4	2
Linhas de código	214	162
Dependências do npm	`@base-ui/react@^1.8.0class-variance-authoritycn`	`cn`
Construído com	`buttonsheettheme`	`button`

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 HextaUIDialogBody

Em ambosDialogDialogTriggerDialogPortalDialogOverlayDialogCloseDialogContentDialogHeaderDialogFooterDialogTitleDialogDescription

Variantes

Prop	Em ambos	Só HextaUI	Só shadcn/ui
`size`DialogContent	–	`defaultsmlg`	–

A versão do HextaUI

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        Edit profile
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you’re done.
          </DialogDescription>
        </DialogHeader>
        <DialogBody>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Olivia Martin" autoComplete="name" />
            </Field>
            <Field>
              <FieldLabel>Username</FieldLabel>
              <Input defaultValue="@olivia" autoComplete="username" />
            </Field>
          </FieldGroup>
        </DialogBody>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>
            Cancel
          </DialogClose>
          <DialogClose render={<Button />}>Save changes</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

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

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