Back to components
Member Role Select React component

What is this?

A compact role picker for a members row. The trigger shows the current role, and opening it drops a short list of Viewer, Editor, and Admin with one-line descriptions. A soft highlight follows the pointer or arrow keys, and the check slides to the row you pick. Enter chooses and Escape closes. Swap the roles and descriptions, then drop it at the end of each row in a team settings table.

Component

Member Role Select

A compact role picker for a members row. The trigger shows the current role, and opening it drops a short list of Viewer, Editor, and Admin with one-line descriptions. A soft highlight follows the pointer or arrow keys, and the check slides to the row you pick. Enter chooses and Escape closes. Swap the roles and descriptions, then drop it at the end of each row in a team settings table.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0