MiniDev UI

Role Picker

Team role picker built on the radio group, offering Owner, Admin and Member options with linked labels. Drop it into invite dialogs and member settings forms.

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

Installation#

bash
npx shadcn@latest add @minidev/role-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/role-picker.json

Usage#

tsx
import { RolePicker } from "@/components/ui/role-picker"

export function Example() {
  return <RolePicker />
}

API reference#

RolePicker props
PropTypeDefault
classNamestring-

Dependencies#

npm

React only

Built from

LabelRadio Group

Related settings components#

Admin User RowUser management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.Avatar UploadReact profile photo uploader with an avatar preview and an Upload button that opens a hidden image file input. Shows initials until a picture is chosen.Bulk User ImportCSV user import panel with a format hint for email, name and role, a CSV-only dropzone and an Import users button that enables once a file is added.Connected AccountTailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations.Danger ZoneDanger zone settings card with a red outline, a warning that the action cannot be undone and a destructive delete button. Put it last on settings pages.Delete Account ConfirmAccount deletion step with a danger alert and a confirmation field: the delete button stays disabled until the user types DELETE. Guards against misclicks.
All settings page components