Tile UI Vue
Source code

Components

Avatar

User avatar primitives with image fallback.

Use Avatar to show user or entity images with a text fallback.

TUTUTU
AB
+3
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from '@tile-ui/vue';
 
export default function AvatarDemo() {
	return (
		<div class="button-group">
			<Avatar size="sm">

Registry install

pnpm dlx shadcn@latest add @tile-ui/avatar

Package usage

import { Avatar, AvatarImage, AvatarFallback } from '@tile-ui/vue';
 
<Avatar>
	<AvatarImage alt="Tile UI" src="https://example.com/avatar.png" />
	<AvatarFallback>TU</AvatarFallback>
</Avatar>

Highlights

  • Image, fallback, and badge
  • Group stacking
  • Three sizes

Registry dependencies

Item Purpose
avatar Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Avatar

Prop Type Default
size 'default' | 'sm' | 'lg' —

AvatarImage

Prop Type Default
alt string —

AvatarFallback

No custom props.

AvatarBadge

No custom props.

AvatarGroup

No custom props.

AvatarGroupCount

No custom props.

PreviousAttachmentNextBadge