Viora LogoViora UI
Login

Hover Card

A hover card component that displays rich content on hover.

What's new?
demo-hover-card-demo.tsx
Loading source code...

Installation

pnpm dlx viora-ui add hover-card
npx viora-ui add hover-card
yarn viora-ui add hover-card
bunx --bun viora-ui add hover-card

Usage

import { HoverCardDemo } from "viora-ui";
import { HoverCardDemo } from "viora-ui";

export default function HoverCardDemoDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <HoverCardDemo />
    </div>
  );
}

API Reference

HoverCardDemo

PropTypeDefaultDescription
mode?'default' | 'link'-Configuration for mode.
className?string""Additional CSS classes for custom styling.
children?React.ReactNode-Content or child elements to render.
onMouseEnter?() => void-Callback fired on mouseenter event.
onMouseLeave?() => void-Callback fired on mouseleave event.

Built by Otis

Last updated: 9/13/2026