Avatar

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup } from "@line/abc-def-react/avatar";

<script setup lang="ts">
import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup } from "@line/abc-def-vue/avatar";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Avatar, AvatarFallback, AvatarGroup } from "@line/abc-def-react/avatar";

export function Example() {
  return (
    <AvatarGroup>
      <Avatar><AvatarFallback>AB</AvatarFallback></Avatar>
      <Avatar><AvatarFallback>CD</AvatarFallback></Avatar>
    </AvatarGroup>
  );
}

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@line/abc-def-vue/avatar";
</script>

<template>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="Jane Doe" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
</template>

Component tokens

Composition exports

Usage notes

• Always include an accessible fallback.
• Group avatars only when the set represents one shared context.
• Related component tokens use the `avatar` token group in `@line/abc-def-styles/css`.