MiniDev UI

Admin User Row

User management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.

src/registry/ui/admin-user-row.tsx/r/admin-user-row.json

Installation#

bash
npx shadcn@latest add @minidev/admin-user-row

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/admin-user-row.json

Usage#

tsx
import { AdminUserRow } from "@/components/ui/admin-user-row"

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

API reference#

AdminUserRow props
PropTypeDefault
namestring"Maya Chen"
emailstring"maya.chen@northwind.com"
role"admin" | "write" | "read""read"
onlineboolean-
classNamestring-

Dependencies#

npm

lucide-react

Built from

AvatarIcon ButtonPermission ChipStatus Dot

Related settings components#

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.Export DataSettings card to request a data export, explaining what the JSON export includes and when it will be ready, with a Request export button.
All settings page components