@legendsdotfun/build

A 5-step startup pitch wizard React component. Guides founders through structured exercises — from problem research to pitch delivery — with an optional resources panel for each step.

Install

npm install @legendsdotfun/build

Usage

import { LegendsBuild } from "@legendsdotfun/build";
import "@legendsdotfun/build/styles";

function App() {
  return (
    <LegendsBuild
      onChange={(data) => console.log("Form changed", data)}
      onSubmit={(data) => console.log("Submitted", data)}
      onStepChange={(step) => console.log("Step", step)}
    />
  );
}

Steps

| Step | Title | Fields | | ---- | -------------------------------- | ------------------------------------------------------------------- | | 1 | Problem Research | Target user, user journey, pain point, root cause, proof-of-pain links | | 2 | Value Proposition, Positioning & MVP | Product name, one-liner, target users, outcome, differentiation, MVP link | | 3 | Proof of Traction | 3 KPIs with proof, current status, hackathon target | | 4 | Growth Strategy | Go-to-market focus, distribution source/engine, long-term asset, defensibility | | 5 | Pitch & Execution | Pitch video URL, execution timeline |

Props

type LegendsBuildProps = {
  className?: string;
  initialData?: Partial<LegendsBuildData>;
  resources?: StepResources[];
  onChange?: (data: LegendsBuildData) => void;
  onSubmit?: (data: LegendsBuildData) => void;
  onStepChange?: (step: number) => void;
};

| Prop | Description | | -------------- | ------------------------------------------------------------------ | | className | Additional CSS class for the root container | | initialData | Pre-fill form fields (partial data is fine) | | resources | Custom resources per step (videos/links shown in the side panel). Falls back to built-in defaults. | | onChange | Called whenever any field changes | | onSubmit | Called when the user submits on step 5 | | onStepChange | Called when the user navigates between steps |

Custom Resources

Override the default resources panel by passing your own:

import { LegendsBuild, StepResources } from "@legendsdotfun/build";

const resources: StepResources[] = [
  {
    step: 1,
    title: "Problem Research",
    resources: [
      {
        type: "video",
        url: "https://example.com/video",
        title: "How to validate a problem",
        description: "Learn to identify real pain points.",
      },
      {
        type: "link",
        url: "https://example.com/article",
        title: "Startup Ideas Guide",
        icon: "bulb",
      },
    ],
  },
  // ... steps 2-5
];

<LegendsBuild resources={resources} />

Development

# Run the demo app
npm run dev

# Build the library
npm run build

License

Private