# User
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/user
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/user.mdx
> Migration guide for User from HeroUI v2 to v3
***
The User component has been **removed** in HeroUI v3. Compose user displays manually using Avatar and text elements with Tailwind CSS classes.
## Key Changes
### 1. Component Removal
**v2:** `` component from `@heroui/react`
**v3:** Manual composition using `Avatar` + text elements
### 2. Features Mapping
The v2 User component had the following features that need to be replaced:
| v2 Feature | v3 Equivalent | Notes |
|-----------|---------------|-------|
| `name` prop | Text element | Render name as text or heading |
| `description` prop | Text element | Render description as text |
| `avatarProps` prop | `Avatar` component | Use v3 Avatar component directly |
| `isFocusable` prop | Manual focus handling | Add `tabIndex` and focus styles if needed |
| `classNames` prop | Tailwind classes | Apply classes directly to elements |
## Structure Changes
### v2: User Component
In v2, `User` was a convenience component combining Avatar with name:
```tsx
import { User } from "@heroui/react";
export default function App() {
return (
);
}
```
### v3: Manual Composition
In v3, compose user displays manually using Avatar and text elements:
```tsx
import { Avatar } from "@heroui/react";
export default function App() {
return (
JGJunior Garcia
);
}
```
## Migration Examples
### With Description
```tsx
import { User } from "@heroui/react";
```
```tsx
import { Avatar } from "@heroui/react";
JG
Junior GarciaSoftware Engineer
```
### With Default Avatar (Initials)
```tsx
import { User } from "@heroui/react";
name
.split(" ")
.map((n) => n[0])
.join(""),
}}
/>
```
```tsx
import { Avatar } from "@heroui/react";
function getInitials(name: string) {
return name
.split(" ")
.map((n) => n[0])
.join("");
}
{getInitials("Junior Garcia")}Junior Garcia
```
### With Link Description
```tsx
import { User, Link } from "@heroui/react";
@jrgarciadev
}
avatarProps={{
src: "https://example.com/avatar.jpg",
}}
/>
```
```tsx
import { Avatar, Link } from "@heroui/react";
JG
Junior Garcia
@jrgarciadev
```
### Clickable User
```tsx
import { User } from "@heroui/react";
{/* Focusable */}
{/* As button */}
```
```tsx
import { Avatar } from "@heroui/react";
{/* Focusable */}
{/* As button */}
```
## Creating a Reusable User Component (Recommended)
Since User displays are commonly needed, here's a reusable component:
```tsx
import { User } from "@heroui/react";
```
```tsx
import { Avatar, Link } from "@heroui/react";
import { ReactNode } from "react";
import { cn } from "@/lib/utils"; // or your cn utility
interface UserProps {
name: string | ReactNode;
description?: string | ReactNode;
avatarSrc?: string;
avatarAlt?: string;
avatarFallback?: string;
className?: string;
isFocusable?: boolean;
as?: "div" | "button" | "a";
href?: string;
onClick?: () => void;
}
function getInitials(name: string): string {
return name
.split(" ")
.map((n) => n[0])
.join("")
.toUpperCase()
.slice(0, 2);
}
export function User({
name,
description,
avatarSrc,
avatarAlt,
avatarFallback,
className,
isFocusable = false,
as = "div",
href,
onClick,
}: UserProps) {
const Component = as === "a" ? "a" : as === "button" ? "button" : "div";
const fallback = avatarFallback || (typeof name === "string" ? getInitials(name) : "?");
const content = (
<>
{avatarSrc && (
)}
{fallback}
);
}
// Usage
```
## Styling Reference
The v2 User component used these base styles that you should replicate:
- **Base container**: `inline-flex items-center gap-2 rounded-sm`
- **Wrapper (for name/description)**: `inline-flex flex-col items-start`
- **Name**: `text-sm` (text-small)
- **Description**: `text-xs text-muted` (text-tiny text-foreground-400)
## Summary
1. **Component Removed**: `User` component no longer exists in v3
2. **Import Change**: Remove `import { User } from "@heroui/react"`
3. **Manual Composition**: Compose using Avatar + text elements
4. **Avatar Changes**: Use v3 Avatar compound component pattern
5. **Styling**: Apply Tailwind CSS classes directly
6. **Focus Handling**: Implement focus styles manually if needed
## Migration Steps
1. **Remove Import**: Remove `User` from `@heroui/react` imports
2. **Replace Component**: Replace all `` instances with manual composition
3. **Use Avatar**: Use v3 Avatar component with compound pattern
4. **Add Text Elements**: Add name and description as text elements
5. **Apply Styling**: Use Tailwind CSS classes for layout and styling
6. **Handle Focus**: Add focus styles if `isFocusable` was used
7. **Optional**: Create reusable User component for your application
## Common Patterns
### User List
```tsx