One member: avatar, name and email, last activity, a role Select and a menu. Pending adds Invited and Resend, and Deactivated locks the role.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/member-rowPlayground
Olivia Bennettolivia@halcyon.example
Active 4m agoAdmin
Active
Olivia Bennettolivia@halcyon.example
Active 4m agoAdmin
Hover
Olivia Bennettolivia@halcyon.example
Active 4m agoAdmin
Pending
jonas@halcyon.exampleInvitedInvited 2 days ago by Ava
Expires in 5 daysMember
Deactivated
Liam CarterDeactivatedliam@halcyon.example
Last seen Sep 2Member
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/member-row
Accessibility
- Controls are named after the person.
- Pending and Deactivated are words on a Badge, never colour alone.
- A deactivated role is plain text, so it cannot be focused.
Motion
- The row fades in over 240 ms, 40 ms after the one before.
- Hover washes 4% over 120 ms.
- With reduced motion, the row appears at once.
Responsive behavior
- Below 480 wide, it keeps the avatar, name, role text and menu.
Performance
- One motion wrapper fades the row in once. Pass index for the 40 ms stagger.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import MemberRow from @/components/fetaui/member-row. It composes Select, Dropdown Menu, Button and Icon Button with Avatar and Tag from product-kit.
- role is controlled, so pass onRoleChange. Roles can be strings or Select options.
- Pending shows name or email plus note in place of the email, so always pass note. Deactivated renders the role as text.
- menu is yours and starts empty. hovered forces the hover pose for previews.
Related
MembersComponentWorkspace members: seat usage, an invite row, the member list with activity and roles, and pending invites.Invite FieldComponentA wrapping box of email chips, a role Select and Send. Send waits until every address is valid.AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.SelectComponentChoose one value from a list. The list grows out of the trigger and the highlight glides.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.