Documentation

Guide

Getting Started

NextUI + Next.jsUpdated

Theme

Layout

Components

User

Flexible User Profile Component.

import { User } from '@nextui-org/react';

Default

The default User display User Image with Text on Screen.

Sizes

The User comes in 5 sizes and you can also set a custom size in px with size property.

Bordered

You can change the full style to a bordered User with the bordered property.

Colors

You can change the color of border with color prop.

Zoomed

You can apply a zoom animation to User with the zoomed property.

Pointer

Display pointer cursor on hover.

Squared

You can change the full style to a squared User with the squared property.

Description

You can add a info text under the name.

User Link

You can Add a Link Below Name Using User.Link Component

APIs

User Props

Attribute	Type	Accepted values	Description	Default
color	`NormalColors` `string`	NormalColors	Change User Profile border color	`default`
src	`string`	-	Image source (local or remote)	-
name	`string`	-	Display Text Next to Image	-
text	`string`	-	Display Text when image is missing	-
alt	`string`	-	Display alt text when image is missing	-
size	`NormalSizes` `number`	NormalSizes	User Profile size	`medium`
bordered	`boolean`	`true/false`	Bordered User Profile	`false`
zoomed	`boolean`	`true/false`	Zoomed User Profile	`false`
pointer	`boolean`	`true/false`	Display pointer cursor on hover	`false`
squared	`boolean`	`true/false`	Squared User Profile	`false`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`span`
...	`ImgHTMLAttributes`	`'alt', 'crossOrigin', 'className', ...`	Native props	-

User types

Simple Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Link Image