Hover Preview List
NewPro
A list of big titles where hovering a row brings out its image, trailing the pointer. On touch the image sits inside the row.
Customize
0.5
260px
7°
Change
#ff784f
When to use it
- Project indexes on a studio or portfolio site
- Game, album or article lists where each title has a cover
- Event or speaker line-ups that stay text-first until you point at a name
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 328
Installation
Hover Preview List is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy hover-preview-list.tsx into components/ui and run npm install motion.
Usage
import { HoverPreviewList } from "@/components/ui/hover-preview-list";
<HoverPreviewList
label="Selected work"
items={projects.map((p) => ({ id: p.id, title: p.name, meta: p.year, href: p.url, src: p.cover }))}
/>Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id?, title, meta?, href?, onClick?, src?, alt?, content? }[] | — | Rows. href makes a link and onClick a button. Pass content or src for the preview. |
| previewWidth | number | 300 | Width of the floating preview, in pixels. |
| aspectRatio | string | "4 / 3" | CSS aspect ratio of the preview, floating or inline. |
| softness | number | 0.5 | How far the preview lags behind the pointer, 0 to 1. |
| tilt | number | 7 | Largest lean while the preview moves fast, in degrees. 0 turns it off. |
| transition | "slide" | "fade" | "slide" | How the preview changes between rows: images roll like a film strip, or fade. |
| restIndex | number | — | Row whose preview stays out while nothing is hovered or focused. By default the preview hides. |
| numbered | boolean | true | Number each row. |
| color | string | "#ff784f" | Color of the active row. |
| label | string | "List" | Accessible name of the list. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion