Blocks

Hero

Centered landing hero.

Block demo

Compose a landing in an afternoon

Each word of the headline rises out of a soft blur; the trust row settles in last.

Trusted by 4,200+ product teams

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 hero

Import

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

app/page.tsx

import { Hero } from "@lumora/ui/blocks/hero";
// or from the barrel:
import { Hero } from "@lumora/ui";

Props worth knowing

headline staggers word by word out of a blur; eyebrow, subcopy, primaryCta/secondaryCta ({ label, onClick }) and avatars shape the rest. Pass avatars={[]} to hide the trust row, and media for a panel that drifts up beneath the copy. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.