User

GitHub
Display user information with name, description and avatar.

Usage

Name

Use the name prop to display a name for the user.

John Doe

<template>
  <UUser name="John Doe" />
</template>

Description

Use the description prop to display a description for the user.

John Doe

Software Engineer

<template>
  <UUser name="John Doe" description="Software Engineer" />
</template>

Avatar

Use the avatar prop to display an Avatar component.

John Doe

Software Engineer

<template>
  <UUser
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe',
      icon: 'i-lucide-image'
    }"
  />
</template>

Chip

Use the chip prop to display a Chip component.

 

John Doe

Software Engineer

<template>
  <UUser
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe'
    }"
    :chip="{
      color: 'primary',
      position: 'top-right'
    }"
  />
</template>

Size

Use the size prop to change the size of the user avatar and text.

 

John Doe

Software Engineer

<template>
  <UUser
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe'
    }"
    chip
    size="xl"
  />
</template>

Orientation

Use the orientation prop to change the orientation. Defaults to horizontal.

 

John Doe

Software Engineer

<template>
  <UUser
    orientation="vertical"
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe'
    }"
  />
</template>

Link

You can pass any property from the <NuxtLink> component such as to, target, rel, etc.

 

Nuxt UI Pro

Premium components for Vue

<template>
  <UUser
    to="https://github.com/nuxt/ui-pro"
    target="_blank"
    name="Nuxt UI Pro"
    description="Premium components for Vue"
    :avatar="{
      src: 'https://github.com/nuxt-ui-pro.png'
    }"
  />
</template>
The NuxtLink component will inherit all other attributes you pass to the User component.

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

name

string

description

string

avatar

Omit<AvatarProps, "size">

chip

boolean | Omit<ChipProps, "size" | "inset">

size

'md'

"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"

orientation

'horizontal'

"vertical" | "horizontal"

The orientation of the user.

to

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

ui

Partial<{ root: string; wrapper: string; name: string; description: string; avatar: string; }>

Slots

Slot Type
avatar

{}

name

{}

description

{}

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    user: {
      slots: {
        root: 'relative group/user',
        wrapper: '',
        name: 'font-medium',
        description: 'text-[var(--ui-text-muted)]',
        avatar: 'shrink-0'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-center'
          },
          vertical: {
            root: 'flex flex-col'
          }
        },
        to: {
          true: {
            name: [
              'text-[var(--ui-text)] peer-hover:text-[var(--ui-text-highlighted)]',
              'transition-colors'
            ],
            description: [
              'peer-hover:text-[var(--ui-text-muted-toned)]',
              'transition-colors'
            ],
            avatar: 'transform transition-transform duration-200 group-hover/user:scale-115'
          },
          false: {
            name: 'text-[var(--ui-text-highlighted)]',
            description: ''
          }
        },
        size: {
          '3xs': {
            root: 'gap-1',
            wrapper: 'flex items-center gap-1',
            name: 'text-xs',
            description: 'text-xs'
          },
          '2xs': {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-xs',
            description: 'text-xs'
          },
          xs: {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-xs',
            description: 'text-xs'
          },
          sm: {
            root: 'gap-2',
            name: 'text-xs',
            description: 'text-xs'
          },
          md: {
            root: 'gap-2',
            name: 'text-sm',
            description: 'text-xs'
          },
          lg: {
            root: 'gap-2.5',
            name: 'text-sm',
            description: 'text-sm'
          },
          xl: {
            root: 'gap-2.5',
            name: 'text-base',
            description: 'text-sm'
          },
          '2xl': {
            root: 'gap-3',
            name: 'text-base',
            description: 'text-base'
          },
          '3xl': {
            root: 'gap-3',
            name: 'text-lg',
            description: 'text-base'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        user: {
          slots: {
            root: 'relative group/user',
            wrapper: '',
            name: 'font-medium',
            description: 'text-[var(--ui-text-muted)]',
            avatar: 'shrink-0'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-center'
              },
              vertical: {
                root: 'flex flex-col'
              }
            },
            to: {
              true: {
                name: [
                  'text-[var(--ui-text)] peer-hover:text-[var(--ui-text-highlighted)]',
                  'transition-colors'
                ],
                description: [
                  'peer-hover:text-[var(--ui-text-muted-toned)]',
                  'transition-colors'
                ],
                avatar: 'transform transition-transform duration-200 group-hover/user:scale-115'
              },
              false: {
                name: 'text-[var(--ui-text-highlighted)]',
                description: ''
              }
            },
            size: {
              '3xs': {
                root: 'gap-1',
                wrapper: 'flex items-center gap-1',
                name: 'text-xs',
                description: 'text-xs'
              },
              '2xs': {
                root: 'gap-1.5',
                wrapper: 'flex items-center gap-1.5',
                name: 'text-xs',
                description: 'text-xs'
              },
              xs: {
                root: 'gap-1.5',
                wrapper: 'flex items-center gap-1.5',
                name: 'text-xs',
                description: 'text-xs'
              },
              sm: {
                root: 'gap-2',
                name: 'text-xs',
                description: 'text-xs'
              },
              md: {
                root: 'gap-2',
                name: 'text-sm',
                description: 'text-xs'
              },
              lg: {
                root: 'gap-2.5',
                name: 'text-sm',
                description: 'text-sm'
              },
              xl: {
                root: 'gap-2.5',
                name: 'text-base',
                description: 'text-sm'
              },
              '2xl': {
                root: 'gap-3',
                name: 'text-base',
                description: 'text-base'
              },
              '3xl': {
                root: 'gap-3',
                name: 'text-lg',
                description: 'text-base'
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})