# Team Access Card

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/team-access-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/team-access-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt