Components

Hover Link

An anchor with an animated lumen underline.

Slide — in from the left, out to the right Center — blooms from the middle Draw — overshoots, then settles

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 hover-link

Import

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

app/page.tsx

import { HoverLink } from "@lumora/ui/components/hover-link";
// or from the barrel:
import { HoverLink } from "@lumora/ui";

Props worth knowing

A real anchor — all native <a> props pass through. variant: "slide" wipes the underline in from the left and out to the right, "center" blooms from the middle, "draw" overshoots past the text on a spring before settling. arrow appends a glyph that nudges up-right; keyboard focus shows the underline too. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.