Components

Gradient Text

Inline text painted by a slow lumen gradient that sweeps left to right on a seamless loop — accent into foreground and back.

Interfaces that glow

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 gradient-text

Import

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

app/page.tsx

import { GradientText } from "@lumora/ui/components/gradient-text";
// or from the barrel:
import { GradientText } from "@lumora/ui";

Props worth knowing

Wrap any inline text; speed sets seconds per full gradient sweep (default 6). The gradient holds still under reduced motion so the text stays legible. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.