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>
  <PUser name="John Doe" />
</template>

Description

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

John Doe

Software Engineer

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

Avatar

Use the avatar prop to display an Avatar component.

John Doe

John Doe

Software Engineer

<template>
  <PUser
    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>
  <PUser
    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>
  <PUser
    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>
  <PUser
    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.

praburangki

praburangki

Software Engineer

<template>
  <PUser
    to="https://github.com/praburangki"
    target="_blank"
    name="praburangki"
    description="Software Engineer"
    :avatar="{
      src: 'https://github.com/praburangki.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<PAvatarProps, "size"> & { [key: string]: any; }
chipboolean | Omit<PChipProps, "size" | "inset">
size'md' "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"
orientation'horizontal' "horizontal" | "vertical"

The orientation of the user.

to string | kt | Tt
target null | "_blank" | "_parent" | "_self" | "_top" | string & {}
pohon { root?: ClassValue; wrapper?: ClassValue; name?: ClassValue; description?: ClassValue; avatar?: ClassValue; }

Slots

Slot Type
avatar{ pohon: object; }
nameobject
descriptionobject
defaultobject

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PUser. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    user: {
      slots: {
        root: '',
        wrapper: '',
        name: '',
        description: '',
        avatar: ''
      },
      variants: {
        orientation: {
          horizontal: {
            root: ''
          },
          vertical: {
            root: ''
          }
        },
        to: {
          true: {
            name: '',
            description: '',
            avatar: ''
          },
          false: {
            name: '',
            description: ''
          }
        },
        size: {
          '3xs': {
            root: '',
            wrapper: '',
            name: '',
            description: ''
          },
          '2xs': {
            root: '',
            wrapper: '',
            name: '',
            description: ''
          },
          xs: {
            root: '',
            wrapper: '',
            name: '',
            description: ''
          },
          sm: {
            root: '',
            name: '',
            description: ''
          },
          md: {
            root: '',
            name: '',
            description: ''
          },
          lg: {
            root: '',
            name: '',
            description: ''
          },
          xl: {
            root: '',
            name: '',
            description: ''
          },
          '2xl': {
            root: '',
            name: '',
            description: ''
          },
          '3xl': {
            root: '',
            name: '',
            description: ''
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    user: {
      slots: {
        root: '',
        wrapper: '',
        name: '',
        description: '',
        avatar: ''
      },
      variants: {
        orientation: {
          horizontal: {
            root: ''
          },
          vertical: {
            root: ''
          }
        },
        to: {
          true: {
            name: '',
            description: '',
            avatar: ''
          },
          false: {
            name: '',
            description: ''
          }
        },
        size: {
          '3xs': {
            root: '',
            wrapper: '',
            name: '',
            description: ''
          },
          '2xs': {
            root: '',
            wrapper: '',
            name: '',
            description: ''
          },
          xs: {
            root: '',
            wrapper: '',
            name: '',
            description: ''
          },
          sm: {
            root: '',
            name: '',
            description: ''
          },
          md: {
            root: '',
            name: '',
            description: ''
          },
          lg: {
            root: '',
            name: '',
            description: ''
          },
          xl: {
            root: '',
            name: '',
            description: ''
          },
          '2xl': {
            root: '',
            name: '',
            description: ''
          },
          '3xl': {
            root: '',
            name: '',
            description: ''
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
};

Changelog

No recent changes

Tree

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

Breadcrumb

A hierarchy of links to navigate through a website.