User
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>
| Prop | Default | Type |
|---|---|---|
name | string | |
description | string | |
avatar | Omit<AvatarProps, "size"> & { [key: string]: any; }
| |
chip | boolean | Omit<ChipProps, "size" | "inset"> | |
orientation | 'horizontal' | "horizontal" | "vertical" |
to | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
| |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
onClick | (event: MouseEvent): void | Promise<void> | |
ui | { root?: ClassNameValue; wrapper?: ClassNameValue; name?: ClassNameValue; description?: ClassNameValue; avatar?: ClassNameValue; } |
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>
| Prop | Default | Type |
|---|---|---|
name | string | |
description | string | |
avatar | Omit<AvatarProps, "size"> & { [key: string]: any; }
| |
chip | boolean | Omit<ChipProps, "size" | "inset"> | |
orientation | 'horizontal' | "horizontal" | "vertical" |
to | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
| |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
onClick | (event: MouseEvent): void | Promise<void> | |
ui | { root?: ClassNameValue; wrapper?: ClassNameValue; name?: ClassNameValue; description?: ClassNameValue; avatar?: ClassNameValue; } |
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.
<template>
<UUser
to="https://github.com/benjamincanac"
target="_blank"
name="Benjamin Canac"
description="Software Engineer"
:avatar="{
src: 'https://github.com/benjamincanac.png'
}"
/>
</template>
The
NuxtLink component will inherit all other attributes you pass to the User component.API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
name | string | |
description | string | |
avatar | Omit<AvatarProps, "size"> & { [key: string]: any; }
| |
chip | boolean | Omit<ChipProps, "size" | "inset"> | |
size | 'md' | "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation of the user. |
to | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
| |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
ui | { root?: ClassNameValue; wrapper?: ClassNameValue; name?: ClassNameValue; description?: ClassNameValue; avatar?: ClassNameValue; } |
Slots
| Slot | Type |
|---|---|
avatar | { ui: object; } |
name | {} |
description | {} |
default | {} |
Theme
app.config.ts
export default defineAppConfig({
ui: {
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({
ui: {
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'
}
}
}
})
]
})