Priority Rank

Open in playground

Drag rows to reorder priorities. Items not present in `value` are appended in their natural order, so an empty array starts with the items in their source sequence.

Preview

Rank what to tackle first

Drag items to reorder your priorities

User research
Validate the problem and audience
Technical architecture
Choose stack, infra, and data model
Visual design
Define the brand and UI direction
Go-to-market
Plan distribution and launch
Funding
Secure budget or investment

Usage

import { PriorityRank } from "@/components/socratic-ui/priority-rank";

<PriorityRank
  question="Rank what to tackle first"
  items={[
    { title: "User research" },
    { title: "Technical architecture" },
  ]}
  value={ranking}
  onChange={setRanking}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the items.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`items`required The list of rankable items.	`{ title: string; subtitle?: string }[]`	`—`
`value`required Ordered list of titles, highest priority first.	`string[]`	`—`
`onChange`required Called when the user drags an item to a new position.	`(value: string[]) => void`	`—`
`number` Optional leading question number.	`string`	`—`
`iconLayout` How icons align relative to their label. `vertical` stacks icon above label for a tile-style layout.	`"horizontal" \| "vertical"`	`"horizontal"`
`iconAlignment` Horizontal alignment of the icon within its slot. Only applies when `iconLayout` is `"vertical"`.	`"left" \| "center"`	`"left"`
`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`	`—`