Agreement Spectrum

Open in playground

Likert-rate a batch of statements on a 5-point agree/disagree scale. Optionally surface a ‘% of similar people agree’ comparison once each statement is rated — useful for provoking reflection, not just collecting data.

Preview

Where do you stand?

Rate each statement — see how others responded.

We should build in public from day one

A beautiful UI is table stakes

Launching without analytics is fine

We need a paid plan at launch

Usage

import { AgreementSpectrum } from "@/components/socratic-ui/agreement-spectrum";

<AgreementSpectrum
  question="Where do you stand?"
  statements={[
    { id: "public", text: "We should build in public from day one", crowd: 72 },
    { id: "ui", text: "A beautiful UI is table stakes", crowd: 85 },
  ]}
  value={ratings}
  onChange={setRatings}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the statement rows.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`statements`required The statements to rate. `id` keys the response map; `crowd` is an optional ‘% of others who agree’ figure shown once rated.	`{ id: string; text: string; crowd?: number }[]`	`—`
`scaleLabels` Five labels for the Likert scale. Only the last word of each label is rendered on the button.	`string[]`	`Strongly disagree → Strongly agree`
`value`required Map of statement id → 0–4 scale index.	`Record<string, number>`	`—`
`onChange`required Called when any statement's rating changes.	`(value: Record<string, number>) => void`	`—`
`number` Optional leading question number.	`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`	`—`