Popover: HextaUI e shadcn/ui

O Popover 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	8	6
Props tratadas pelo wrapper	12	4
Linhas de código	269	89
Dependências do npm	`@base-ui/react@^1.8.0cn`	`cn`
Construído com	`theme`	–

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 HextaUIPopoverPortalPopoverClose

Em ambosPopoverPopoverTriggerPopoverContentPopoverHeaderPopoverTitlePopoverDescription

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
`portalProps`PopoverContent	Props do portal, como container.

A versão do HextaUI

import { IconAdjustmentsHorizontal } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

const field =
  "h-8 w-full min-w-0 rounded-md border bg-transparent px-2 text-sm outline-none focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-ring pointer-coarse:h-11 pointer-coarse:text-lg"

export function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        <IconAdjustmentsHorizontal />
        Dimensions
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>
            Set the dimensions for the layer.
          </PopoverDescription>
        </PopoverHeader>
        <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-center gap-2">
          <label htmlFor="popover-width" className="text-sm">
            Width
          </label>
          <input id="popover-width" className={field} defaultValue="100%" />
          <label htmlFor="popover-height" className="text-sm">
            Height
          </label>
          <input id="popover-height" className={field} defaultValue="25px" />
        </div>
        <div className="flex justify-end gap-2">
          <PopoverClose render={<Button variant="ghost" size="sm" />}>
            Cancel
          </PopoverClose>
          <PopoverClose render={<Button size="sm" />}>Apply</PopoverClose>
        </div>
      </PopoverContent>
    </Popover>
  )
}

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

11 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/popover.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.