Components

Reveal List

Editorial list of large rows: hovering a row summons a floating preview image that trails the cursor on a lagging spring and crossfades as you move between rows, while the other rows dim back.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add reveal-list

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { RevealList } from "@lumora/ui/components/reveal-list";
// or from the barrel:
import { RevealList } from "@lumora/ui";

Props worth knowing

items take { title, meta?, src, href? } — hovering a row summons a floating preview image that trails the cursor on a soft spring while the other rows dim; keyboard focus pins the preview to the row's right edge. Rows render as links when href is set, otherwise as buttons firing onItemClick. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.