Avatar

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download avatar -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Avatar } from "@/components/ui/avatar";
import { AvatarImage } from "@/components/ui/avatar";
import { AvatarFallback } from "@/components/ui/avatar";

const args = {
  "src": "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22%236366f1%22/%3E%3C/svg%3E",
  "style": "",
  "seed": "",
  "naked": false,
};
</script>

<template>
  <Avatar
    ><AvatarImage :src="args.src" alt="Avatar" /><AvatarFallback
      >CN</AvatarFallback
    ></Avatar
  >
</template>

Examples

Avatar With Image

<script setup lang="ts">
import { Avatar } from "@/components/ui/avatar";
import { AvatarImage } from "@/components/ui/avatar";
import { AvatarFallback } from "@/components/ui/avatar";

const args = {
  "src": "https://uploads.donux.com/api/image/67920ddf5778c60b519f2002",
  "style": "",
  "seed": "",
  "naked": false,
  "name": "Mario Rossi",
};
</script>

<template>
  <Avatar :naked="args.naked">
    <AvatarImage
      :src="args.src"
      alt="avatar"
      :style="args.style"
      :seed="args.seed"
    />
    <AvatarFallback :name="args.name" />
  </Avatar>
</template>

Avatar With Fallback

<script setup lang="ts">
import { Avatar } from "@/components/ui/avatar";
import { AvatarImage } from "@/components/ui/avatar";
import { AvatarFallback } from "@/components/ui/avatar";

const args = {
  "src": "",
  "style": "",
  "seed": "",
  "naked": false,
};
</script>

<template>
  <Avatar :naked="args.naked">
    <AvatarImage
      :src="args.src"
      :style="args.style"
      :seed="args.seed"
      alt="avatar"
    />
    <AvatarFallback name="Mario Rossi" />
  </Avatar>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Avatar

AvatarBadge

AvatarFallback

AvatarImage

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.