Empty: HextaUI e shadcn/ui

O Empty 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	6	6
Props tratadas pelo wrapper	10	1
Linhas de código	226	103
Dependências do npm	`@base-ui/react@^1.8.0class-variance-authoritycn`	`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.

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
`animated`Empty	Faz as partes surgirem com fade em sequência quando o estado vazio é montado. Ignorado com movimento reduzido.

Variantes

Prop	Em ambos	Só HextaUI	Só shadcn/ui
`variant`Empty	–	`defaultoutlinemuted`	–
`size`Empty	–	`defaultsm`	–
`variant`EmptyMedia	`defaulticon`	`stack`	–

A versão do HextaUI

You’re all caught up

New mentions, reviews and replies land here. Nothing needs you right now.

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

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export function EmptyDemo() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="stack">
          <IconInbox />
        </EmptyMedia>
        <EmptyTitle>You’re all caught up</EmptyTitle>
        <EmptyDescription>
          New mentions, reviews and replies land here. Nothing needs you right
          now.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Notification settings
        </Button>
      </EmptyContent>
    </Empty>
  )
}

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

15 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/empty.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.