# 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/hover-preview-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/hover-preview-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt