User

Display user information with avatar and name.

Storybook@nextui-org/userSourceStyles source
Zigma by NextUI (YC S24) - Connect your design files to production code in minutes | Product Hunt

We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀


Installation

npx nextui-cli@latest add user
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

AttributeTypeDescriptionDefault
namestringThe name of the user.-
descriptionReactNodeThe description component.-
isFocusablebooleanWhether the user is focusable. This is useful when using Dropdown or similar components.false
avatarPropsAvatarPropsThe avatar component props. The name is passed by default.-
classNamesRecord<"base"| "wrapper"| "name"| "description", string>Allows to set custom class names for the user slots.-