Components
Hover Preview Button
The HoverPreviewButton component is a versatile and interactive button built entirely with shadcn UI. When hovered, it reveals a small preview popup that can display images, charts, text, or any custom content, providing users with a quick glance at additional information without leaving the page. The preview is dynamically positioned below the button and centered, ensuring a clean and intuitive interface. Fully responsive and theme-independent, this component is ideal for actions like “View Report,” image previews, or mini dashboards, enhancing user experience with an elegant, lightweight, and highly reusable design.
Loading preview...
"use client"
import HoverPreviewButton from "@/components/ui/hover-preview-button"
export default function HoverPreviewButtonDemo() {
return (
<div className="p-6 flex flex-col gap-6">
<HoverPreviewButton
label="View Report"
previewContent={
<div className="text-sm">
<p className="font-semibold mb-1">Sales Report</p>
<p>Total Revenue: $12,340</p>
<p>New Customers: 120</p>
</div>
}
/>
<HoverPreviewButton
label="Preview Image"
previewContent={
<img
src="https://placekitten.com/200/150"
alt="Preview"
className="w-full h-auto rounded-md"
/>
}
/>
<HoverPreviewButton
label="Mini Chart"
previewContent={
<div className="w-full h-24 bg-gray-100 flex items-center justify-center rounded-md text-gray-500">
Chart Preview
</div>
}
/>
</div>
)
}