Block

Launch Hero

A landing hero built from an eyebrow pill, a two line headline whose second line arrives on a sweeping color band, two actions, and a logo row scrolling beneath them.

Dia Text Reveal
Logo Marquee
Button
Badge

Now live, the Blocks catalog

Stop rebuildingthe same section

Whole page sections, composed from components you already own. Change the copy, not the markup.

Browse blocks See components

Trusted by teams at

NorthlineVeraHalcyonEmber & CoFenwickSolstice

page.tsx

import { HeroLaunch } from "@/components/blocks/hero-launch";

export default function Page() {
  return (
    <HeroLaunch
      eyebrow="Now live, the Blocks catalog"
      titleLead="Stop rebuilding"
      titleHighlight="the same section"
      description="Whole page sections, composed from components you already own."
      primaryAction={{ label: "Browse blocks", href: "/blocks" }}
      secondaryAction={{ label: "See components", href: "/components" }}
      logos={["Northline", "Vera", "Halcyon", "Fenwick"]}
    />
  );
}

"use client";

import { ArrowRight } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { DiaTextReveal } from "@/components/registry/dia-text-reveal";
import { LogoMarquee } from "@/components/registry/logo-marquee";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

// A block is the one place in this repo that composes rather than stands alone:
// it pulls in whole Pro components and wires them into a section. Its own

127 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/hero-launch

Props

eyebrowReactNode

Small pill above the headline. Left off, the headline leads.

eyebrowHrefstringDefault "#"

Where the pill links to.

titleLeadRequiredstring

The first line of the headline.

titleHighlightRequiredstring

The phrase the color band sweeps across. It arrives with the color rather than sitting there while a wash passes over it.

titleTrailstring

The rest of the second line, after the highlight.

descriptionRequiredstring

One paragraph under the headline.

primaryActionRequired{ label: string; href: string }

The filled button.

secondaryAction{ label: string; href: string }

The outlined button beside it.

logosstring[]

Names for the row beneath. Left off, the marquee is not rendered.

logosLabelstringDefault "Trusted by teams at"

Line above the logo row.

classNamestring

Merged last, so anything passed here wins over the component's own classes.