User

Display user information with avatar and name.


Installation

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Note: See the Avatar component for more details about avatarProps.

Slots

  • base: The base slot of the user, it is the main container.
  • wrapper: The name and description wrapper.
  • name: The name of the user.
  • description: The description of the user.

Data Attributes

User has the following attributes on the root element only when isFocusable is true:

  • data-focus: When the user is being focused. Based on useFocusRing
  • data-focus-visible: When the user is being focused with the keyboard. Based on useFocusRing

API

User Props

PropTypeDefault
name
string
description
ReactNode
isFocusable
boolean
false
avatarProps
AvatarProps
classNames
Partial<Record<"base" | "wrapper" | "name" | "description", string>>