User

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: <User> component from @lenso/ui
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:

1import { User } from "@lenso/ui";2
3export default function App() {4  return (5    <User6      name="Junior Garcia"7      avatarProps={{8        src: "https://example.com/avatar.jpg",9      }}10    />11  );12}

v3: Manual Composition

In v3, compose user displays manually using Avatar and text elements:

1import { Avatar } from "@lenso/ui";2
3export default function App() {4  return (5    <div className="inline-flex items-center gap-2">6      <Avatar>7        <Avatar.Image8          src="https://example.com/avatar.jpg"9          alt="Junior Garcia"10        />11        <Avatar.Fallback>JG</Avatar.Fallback>12      </Avatar>13      <span className="text-sm">Junior Garcia</span>14    </div>15  );16}

Migration Examples

With Description

1import { User } from "@lenso/ui";2
3<User4  name="Junior Garcia"5  description="Software Engineer"6  avatarProps={{7    src: "https://example.com/avatar.jpg",8  }}9/>

With Default Avatar (Initials)

1import { User } from "@lenso/ui";2
3<User4  name="Junior Garcia"5  avatarProps={{6    name: "Junior Garcia",7    getInitials: (name) =>8      name9        .split(" ")10        .map((n) => n[0])11        .join(""),12  }}13/>

With Link Description

1import { User, Link } from "@lenso/ui";2
3<User4  name="Junior Garcia"5  description={6    <Link href="https://x.com/jrgarciadev" size="sm">7      @jrgarciadev8    </Link>9  }10  avatarProps={{11    src: "https://example.com/avatar.jpg",12  }}13/>

Clickable User

1import { User } from "@lenso/ui";2
3{/* Focusable */}4<User5  name="Junior Garcia"6  isFocusable7  avatarProps={{8    src: "https://example.com/avatar.jpg",9  }}10/>11
12{/* As button */}13<User14  as="button"15  name="Junior Garcia"16  avatarProps={{17    src: "https://example.com/avatar.jpg",18  }}19/>

Creating a Reusable User Component (Recommended)

Since User displays are commonly needed, here's a reusable component:

1import { User } from "@lenso/ui";2
3<User4  name="Junior Garcia"5  description="Software Engineer"6  avatarProps={{7    src: "https://example.com/avatar.jpg",8  }}9/>

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

Component Removed: User component no longer exists in v3
Import Change: Remove import { User } from "@lenso/ui"
Manual Composition: Compose using Avatar + text elements
Avatar Changes: Use v3 Avatar compound component pattern
Styling: Apply Tailwind CSS classes directly
Focus Handling: Implement focus styles manually if needed

Migration Steps

Remove Import: Remove User from @lenso/ui imports
Replace Component: Replace all <User> instances with manual composition
Use Avatar: Use v3 Avatar component with compound pattern
Add Text Elements: Add name and description as text elements
Apply Styling: Use Tailwind CSS classes for layout and styling
Handle Focus: Add focus styles if isFocusable was used
Optional: Create reusable User component for your application

Common Patterns

User List

1<div className="space-y-2">2  {users.map((user) => (3    <div key={user.id} className="inline-flex items-center gap-2">4      <Avatar>5        <Avatar.Image src={user.avatar} alt={user.name} />6        <Avatar.Fallback>{getInitials(user.name)}</Avatar.Fallback>7      </Avatar>8      <div className="flex flex-col items-start">9        <span className="text-sm">{user.name}</span>10        {user.role && (11          <span className="text-xs text-muted">{user.role}</span>12        )}13      </div>14    </div>15  ))}16</div>

Clickable User

1<button2  className="inline-flex items-center gap-2 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-focus hover:bg-default-100"3  onClick={() => handleUserClick(user)}4>5  <Avatar>6    <Avatar.Image src={user.avatar} alt={user.name} />7    <Avatar.Fallback>{getInitials(user.name)}</Avatar.Fallback>8  </Avatar>9  <div className="flex flex-col items-start">10    <span className="text-sm">{user.name}</span>11    <span className="text-xs text-muted">{user.email}</span>12  </div>13</button>