LandingHero

The opening band of a landing page, with a badge, a title with a gradient accent, a description and actions.

import { LandingHero } from '@lobehub/ui/awesome';

NPM Source Edit

Landing

Default

Loading preview

Split layout

Pass aside to put content beside the text, such as an AgentSkillCard. The text aligns left and the columns stack on narrow screens.

Loading preview

Routing

Actions render plain anchors. Pass renderLink to use your router's link component:

TSX

import { Link } from 'react-router';

<LandingHero
  renderLink={({ external, href, ...props }) =>
    external ? (
      <a href={href} rel="noreferrer" target="_blank" {...props} />
    ) : (
      <Link to={href} {...props} />
    )
  }
  title="LobeHub"
/>;

Put a LogoMarquee in children to show it across the full width under the hero.

APIs

LandingHero properties

accent: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Rendered after the title with the landing accent gradient.
actions: LandingAction[]
aside: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Content beside the text, e.g. an AgentSkillCard or a product preview. Setting it switches the hero to a two-column layout with left-aligned text; it stacks below the text on narrow screens.
badge: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Small pill above the title, e.g. a release note link.
children: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Full-width content below the hero, e.g. a LogoMarquee.
description: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
onNavigate: LandingNavigate
Client-side navigation for internal non-primary actions (rendered as BottomGradientButton).
renderLink: LandingLinkRender
titleRequired: ReactNode

Also accepts all native HTML and ARIA attributes.