Matrix

Open in playground

Row × level grid assessment. Good for capability audits, feature maturity, risk exposure — anything that needs rating across multiple domains on the same scale.

Preview

Rate your team's capabilities

Tap each cell to assess skill level across domains.

FrontendUI, components, styling

BackendAPIs, databases, auth

DesignUX, brand, visual polish

DevOpsCI/CD, infra, monitoring

Usage

import { Matrix } from "@/components/socratic-ui/matrix";

const [value, setValue] = useState<Record<string, number>>({});

<Matrix
  question="Rate your team's capabilities"
  rows={[
    { id: "frontend", title: "Frontend" },
    { id: "backend", title: "Backend" },
  ]}
  levels={["None", "Basic", "Solid", "Expert"]}
  value={value}
  onChange={setValue}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the matrix.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`rows`required Each row is an independently-rated dimension.	`{ id: string; title: string; subtitle?: string }[]`	`—`
`levels`required Ordered level labels from low (index 0) to high. Picking a level fills it and every level below, like a progress bar.	`string[]`	`—`
`value`required Map of row id to the selected 0-based level index.	`Record<string, number>`	`—`
`onChange`required Called whenever a row's level changes.	`(value: Record<string, number>) => void`	`—`
`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`	`—`