Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/hover-preview-button"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>
)
}