User

A component to display user details, including their name, bio, and profile picture.

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

name

John Doe

{
  "wait": "Loading client-side content..."
}

Description

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

name

description

John Doe

Software Engineer

{
  "wait": "Loading client-side content..."
}

Avatar

Use the avatar prop to display an Avatar component.

John Doe

Software Engineer

{
  "wait": "Loading client-side content..."
}

Prop	Default	Type
`src`		`string`
`alt`		`string`
`icon`		`IconComponent` Display an icon on the left side.
`text`		`string`
`chip`		`boolean \| ChipProps`
`crossorigin`		`"" \| "anonymous" \| "use-credentials"`
`decoding`		`"async" \| "auto" \| "sync"`
`height`		`string \| number`
`loading`		`"lazy" \| "eager"`
`referrerpolicy`		`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`
`sizes`		`string`
`srcset`		`string`
`usemap`		`string`
`width`		`string \| number`
`b24ui`		`{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }`

Chip

Use the chip prop to display a Chip component.

chip.color

chip.position

John Doe

Software Engineer

{
  "wait": "Loading client-side content..."
}

Prop	Default	Type
`text`		`string \| number` Display some text inside the chip.
`trailingIcon`		`IconComponent` The icon displayed on the right side of the chip.
`color`	`'danger'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot" \| "air-secondary" \| "air-secondary-accent" \| "air-secondary-accent-1" \| "air-tertiary"`
`inverted`	`false`	`boolean` If set to `true` the color is inverted. Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
`position`	`'top-right'`	`"top-right" \| "bottom-right" \| "top-left" \| "bottom-left"` The position of the chip.
`inset`	`false`	`boolean` When `true`, keep the chip inside the component for rounded elements
`hideZero`	`false`	`boolean` When `true`, hide chip if value='0'
`show`	`true`	`boolean`
`b24ui`		`{ root?: ClassNameValue; base?: ClassNameValue; trailingIcon?: ClassNameValue; }`

Size

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

size

John Doe

Software Engineer

{
  "wait": "Loading client-side content..."
}

Orientation

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

orientation

name

description

John Doe

Software Engineer

{
  "wait": "Loading client-side content..."
}

Link

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

Username

User description

{
  "wait": "Loading client-side content..."
}

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"> & { [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 & {}`
`b24ui`		`{ root?: ClassNameValue; wrapper?: ClassNameValue; name?: ClassNameValue; description?: ClassNameValue; avatar?: ClassNameValue; }`

Slots

Slot	Type
`avatar`	`{ b24ui: object; }`
`name`	`{}`
`description`	`{}`
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    user: {
      slots: {
        root: 'relative group/user',
        wrapper: '',
        name: 'font-(--ui-font-weight-medium)',
        description: 'text-(--b24ui-typography-description-color)',
        avatar: 'shrink-0'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-center'
          },
          vertical: {
            root: 'flex flex-col'
          }
        },
        to: {
          true: {
            name: 'text-(--b24ui-typography-label-color) peer-hover:text-(--ui-color-design-selection-content) transition-colors',
            description: 'peer-hover:text-(--ui-color-design-selection-content) transition-colors',
            avatar: 'transform transition-transform duration-200 group-hover/user:scale-115'
          },
          false: {
            name: 'text-(--b24ui-typography-label-color)',
            description: ''
          }
        },
        size: {
          '3xs': {
            root: 'gap-1',
            wrapper: 'flex items-center gap-1',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          '2xs': {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          xs: {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          sm: {
            root: 'gap-2',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          md: {
            root: 'gap-2',
            name: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          lg: {
            root: 'gap-2.5',
            name: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-sm)'
          },
          xl: {
            root: 'gap-2.5',
            name: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-sm)'
          },
          '2xl': {
            root: 'gap-3',
            name: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-md)'
          },
          '3xl': {
            root: 'gap-3',
            name: 'text-(length:--ui-font-size-lg)',
            description: 'text-(length:--ui-font-size-md)'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

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

Timeline

A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.

Breadcrumb

A breadcrumb navigation component.