Hover Reveal List
Preview a service by hovering over its row or moving keyboard focus to it. The image and description change together.
- Dependencies
- No extra packages
- Size
- 338 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/hover-reveal-list.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/hover-reveal-list.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the hover-reveal-list.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | RevealService[] | — | { title, eyebrow?, summary, deliverable, image, imageAlt?, href? } |
| number / eyebrow | string | "02" / "Connected expertise" | Mono eyebrow with a square dot. Empty eyebrow and heading hide the header. |
| heading / headingMuted | string | "Five disciplines." / "One sharper direction." | Two-line heading; the second line is muted. |
| intro / introLinkLabel / introLinkHref | string | — | Heading aside paragraph and its text link. Empty intro hides the aside. |
| linkLabel | string | "Explore this discipline" | Link in the context card (shown when the item has href). |
| accent / background / card | string | "#b8f45a" / "#151716" / "#262827" | Active row and focus colour, section background, image well and card. |
| grayscale | boolean | true | Desaturate preview images. |
| className | string | — | Extra classes on the section. |