Assign Picker

Assignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id.

src/registry/ui/assign-picker.tsx/r/assign-picker.json

Installation#

bash

npx shadcn@latest add @minidev/assign-picker

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/assign-picker.json

Usage#

tsx

import { AssignPicker } from "@/components/ui/assign-picker"

export function Example() {
  return (
    <AssignPicker value={assignee} onChange={setAssignee} people={[{ id: "1", name: "Aman" }, { id: "2", name: "Mina" }]} />
  )
}

API reference#

AssignPicker props
Prop	Type	Default
`people`	`Person[]`	`SAMPLE_PEOPLE`
`value`	`string`	`-`
`defaultValue`	`string`	`"theo"`
`onChange`	`(id: string) => void`	`-`
`className`	`string`	`-`

Dependencies#

npm

React only

Built from

Examples#

WorkflowSteps & boards

Approval CardReact request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks.Comment ThreadThreaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer.Due Date ChipSmall Tailwind due date chip with a calendar icon that switches to a red border and icon when overdue. Use it on task cards, tickets and boards.Gantt RowOne row of a Gantt timeline: a task label beside a track with a bar placed by start and end values on a shared scale. Stack rows to build a React roadmap.Issue CardA compact issue tracker card with a monospace ticket key, status and priority badges, a title and an assignee line. Fits Linear or Jira style boards.Issue KeyA monospace ticket identifier such as MD-241 that renders as plain text or, given an href, as a link with an accent hover underline. For issue lists.

All kanban, timeline and workflow components

Learn more

Build a kanban board in React with drag and dropGuide