UserPRO

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

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

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

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

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

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

Slots

Slot Type

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    user: {
      slots: {
        root: 'relative group/user',
        wrapper: '',
        name: 'font-medium',
        description: 'text-muted',
        avatar: 'shrink-0'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-center'
          },
          vertical: {
            root: 'flex flex-col'
          }
        },
        to: {
          true: {
            name: [
              'text-default peer-hover:text-highlighted',
              'transition-colors'
            ],
            description: [
              'peer-hover:text-toned',
              'transition-colors'
            ],
            avatar: 'transform transition-transform duration-200 group-hover/user:scale-115'
          },
          false: {
            name: '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-muted',
            avatar: 'shrink-0'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-center'
              },
              vertical: {
                root: 'flex flex-col'
              }
            },
            to: {
              true: {
                name: [
                  'text-default peer-hover:text-highlighted',
                  'transition-colors'
                ],
                description: [
                  'peer-hover:text-toned',
                  'transition-colors'
                ],
                avatar: 'transform transition-transform duration-200 group-hover/user:scale-115'
              },
              false: {
                name: '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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        user: {
          slots: {
            root: 'relative group/user',
            wrapper: '',
            name: 'font-medium',
            description: 'text-muted',
            avatar: 'shrink-0'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-center'
              },
              vertical: {
                root: 'flex flex-col'
              }
            },
            to: {
              true: {
                name: [
                  'text-default peer-hover:text-highlighted',
                  'transition-colors'
                ],
                description: [
                  'peer-hover:text-toned',
                  'transition-colors'
                ],
                avatar: 'transform transition-transform duration-200 group-hover/user:scale-115'
              },
              false: {
                name: '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'
          }
        }
      }
    })
  ]
})

Tree

A tree view component to display and interact with hierarchical data structures.