User
Display user information with avatar and name.
Storybook@nextui-org/userSourceStyles source
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.
Link Description
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
| Attribute | Type | Description | Default |
|---|---|---|---|
| name | string | The name of the user. | - |
| description | ReactNode | The description component. | - |
| isFocusable | boolean | Whether the user is focusable. This is useful when using Dropdown or similar components. | false |
| avatarProps | AvatarProps | The avatar component props. The name is passed by default. | - |
| classNames | Record<"base"｜ "wrapper"｜ "name"｜ "description", string> | Allows to set custom class names for the user slots. | - |
