The TeamAccessCard component is a sleek, interactive, and fully customizable team management interface built using Shadcn UI and Framer Motion. It allows users to view, invite, edit, and manage team members within a project or workspace. Each member is displayed with an avatar, name, email, and role selector (Admin, Editor, or Viewer), enhanced with smooth entry animations for a polished user experience. The component also features an Invite Member drawer, enabling quick onboarding of new collaborators by entering their email and selecting a role. Additionally, a delete option allows seamless member removal, making this card ideal for use in admin dashboards, SaaS platforms, or collaborative tools. Designed with accessibility, clean design, and reusability in mind, the TeamAccessCard provides a modern and intuitive way to manage team permissions and access levels.
"use client";
import * as React from "react";
import { TeamAccessCard, Member } from "@/components/ui/team-access-card";
const initialMembers: Member[] = [
{
id: "1",
name: "Tony Stark",
email: "tony@starkindustries.com",
avatar: "https://i.pravatar.cc/150?u=tony",
role: "Admin",
},
{
id: "2",
name: "Peter Parker",
email: "peter@dailybugle.com",
avatar: "https://i.pravatar.cc/150?u=peter",
role: "Editor",
},
{
id: "3",
name: "Natasha Romanoff",
email: "natasha@shield.com",
avatar: "https://i.pravatar.cc/150?u=natasha",
role: "Viewer",
},
];
export default function TeamAccessCardDemo() {
const [members, setMembers] = React.useState<Member[]>(initialMembers);
const handleRoleChange = (memberId: string, newRole: Member["role"]) => {
setMembers((prev) =>
prev.map((m) => (m.id === memberId ? { ...m, role: newRole } : m))
);
};
const handleInvite = (email: string, role: Member["role"]) => {
const newMember: Member = {
id: Date.now().toString(),
name: email.split("@")[0],
email,
avatar: `https://i.pravatar.cc/150?u=${email}`,
role,
};
setMembers((prev) => [...prev, newMember]);
};
const handleDelete = (memberId: string) => {
setMembers((prev) => prev.filter((m) => m.id !== memberId));
};
return (
<div className="min-h-screen flex items-center justify-center bg-background p-6">
<TeamAccessCard
title="Avengers Access"
description="Manage your superhero squad access levels and invite new members."
members={members}
onInvite={handleInvite}
onRoleChange={handleRoleChange}
onDelete={handleDelete}
/>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.