Preview Card

Hover preview anchored to a trigger, with motion on open — ideal for link previews.

Em @zexon/ui/components/preview-card. Implementação com Base UI (PreviewCard): o painel posiciona-se junto ao gatilho, com transição de escala/opacidade. O gatilho usa a prop render para compor com Button, link ou outro elemento — padrão útil para um texto que parece URL ou referência.

Para o hover card clássico do Radix (outra API e estilos), vê Hover Card.

Domínio com cartão

API resumida

  • PreviewCard: raiz (estado aberto/fechado e foco).
  • PreviewCardTrigger: envolve o gatilho; use render={<SeuComponente />} para fundir props no elemento (ex.: Button ghost como “link”).
  • PreviewCardPopup: conteúdo em portal; aceita align, sideOffset e className no wrapper do painel (estilos por defeito em @zexon/ui).

O módulo também reexporta os nomes HoverCard, HoverCardTrigger e HoverCardContent como alias dos componentes acima; preferimos PreviewCard* na documentação para não confundir com Hover Card (Radix).

Anterior:

Próximo: