Ember UI LogoEmber UI
Components

Hover Card

A hover-card component

Preview

Loading...
import { Avatar, AvatarFallback, AvatarImage } from "@/registry/axon/ui/avatar";import { Button } from "@/registry/axon/ui/button";import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from "@/registry/axon/ui/hover-card";export default function HoverCardDemo() {  return (    <HoverCard>      <HoverCardTrigger asChild>        <Button variant="link">@confluentinc</Button>      </HoverCardTrigger>      <HoverCardContent className="w-80">        <div className="flex justify-between gap-4">          <Avatar>            <AvatarImage src="https://github.com/confluentinc.png" />            <AvatarFallback>CFLT</AvatarFallback>          </Avatar>          <div className="space-y-1">            <h4 className="font-semibold text-sm">@confluentinc</h4>            <p className="text-sm">              The Confluent Platform – created and maintained by @confluentinc.            </p>            <div className="text-muted-foreground text-xs">              Joined September 2014            </div>          </div>        </div>      </HoverCardContent>    </HoverCard>  );}

Installation

CLI

npx shadcn@latest add @emberui/hover-card
yarn shadcn@latest add @emberui/hover-card
pnpm dlx shadcn@latest add @emberui/hover-card
bunx --bun shadcn@latest add @emberui/hover-card

Reference

This component is based on the shadcn/ui Hover Card component.

On this page