User Story Builder

Open in playground

Repeatable "As a ___, I want ___, so that ___" composer with per-slot chip suggestions. Canonical for product specs — every story is an explicit user + outcome pair, not a feature blurb.

Preview

Write out a few user stories

Tap a suggestion chip to fill a slot, or type your own.

Story 1

As a

I want to

so that

Usage

import { UserStoryBuilder } from "@/components/socratic-ui/user-story-builder";

const [value, setValue] = useState([]);

<UserStoryBuilder
  question="Write out a few user stories"
  personas={["new user", "admin"]}
  actions={["sign up quickly", "invite my team"]}
  outcomes={["I can start in under a minute"]}
  value={value}
  onChange={setValue}
/>

API Reference

Prop	Type	Default
`question`required The overall headline shown above the story cards.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`value`required Controlled list of stories. Includes partial / in-progress stories; use response parsing to drop incomplete ones.	`{ persona: string; action: string; outcome: string }[]`	`—`
`onChange`required Called whenever a slot changes or a story is added / removed.	`(value: { persona: string; action: string; outcome: string }[]) => void`	`—`
`personas` Suggestion chips for the "As a ___" slot.	`string[]`	`—`
`actions` Suggestion chips for the "I want to ___" slot.	`string[]`	`—`
`outcomes` Suggestion chips for the "so that ___" slot.	`string[]`	`—`
`maxStories` Upper bound on how many stories can be added (default 5).	`number`	`—`
`number` Optional leading question number, e.g. "01".	`string`	`—`
`motion` Opt-in entrance animation config. Omit for static rendering; pass `{ enabled: true }` (or a preset from `motion.ts`) to animate in on mount.	`SocraticMotion`	`—`