@mdwrk/lander-react

React components for product landers

This package provides reusable visible React components for rendering compiled lander pages plus first-class fused semantic components that render visible UI and emit matching JSON-LD.

Why

Use it when you want a render-time component layer on top of the lander content contract and compiler outputs.

What

• Page shell and section rendering components.
• FAQ, breadcrumb, package-grid, and proof-matrix components.
• First-class fused semantic exports for all 58 supported structured-data kinds.
• Delegation to @mdwrk/lander-react-structured-data for low-level JSON-LD graph emission and type-specific wrappers.

Installation

Node.js 20.x through 22.x, matching the workspace engine contract in the root package manifest.

npm install @mdwrk/lander-react @mdwrk/lander-core @mdwrk/lander-content-contract

Usage

import { LanderPage } from "@mdwrk/lander-react";

export function Page({ site, page }) {
  return <LanderPage site={site} page={page} />;
}

For split-package consumers that want visible rendering without deprecated structured-data delegates:

import { VisibleLanderPage } from "@mdwrk/lander-react";
import { LanderStructuredData } from "@mdwrk/lander-react-structured-data";

export function Page({ site, page }) {
  return (
    <>
      <LanderStructuredData site={site} page={page} />
      <VisibleLanderPage page={page} />
    </>
  );
}

For prop-native fused semantic authoring:

import { Article, ProductGroup, FAQPage } from "@mdwrk/lander-react";

export function LandingContent() {
  return (
    <>
      <Article
        title="Prompt Delivery Studio"
        description="Visible article plus JSON-LD from one component."
        body={<p>Article body</p>}
      />
      <ProductGroup
        name="Prompt Delivery Studio"
        variesBy={["Region"]}
        hasVariant={[{ name: "US" }, { name: "EU" }]}
      />
      <FAQPage
        items={[{ question: "What is prompt drift?", answer: "Behavior change over time." }]}
      />
    </>
  );
}

Structured Data

Use @mdwrk/lander-react-structured-data for type-specific JSON-LD React wrappers and schema-intent rendering.

@mdwrk/lander-react now owns the preferred prop-native fused semantic front door. @mdwrk/lander-react-structured-data remains the low-level wrapper surface for consumers that explicitly want direct JSON-LD component control.

@mdwrk/lander-react still provides temporary deprecated compatibility re-exports for older structured-data wrapper imports while downstream consumers migrate. New low-level wrapper imports should come directly from @mdwrk/lander-react-structured-data.

Related

• Packages index - family and package navigation
• Root README - repo overview