Tile UI React
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/react';

export default function AvatarDemo() {
	return (
		<div className="button-group">
			<Avatar size="sm">

Registry install

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

Package usage

import { Avatar, AvatarImage, AvatarFallback } from '@tile-ui/react';
 
<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

ItemPurpose
avatarComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Avatar

PropTypeDefault
size'default' | 'sm' | 'lg'—

AvatarImage

PropTypeDefault
altstring—

AvatarFallback

No custom props.

AvatarBadge

No custom props.

AvatarGroup

No custom props.

AvatarGroupCount

No custom props.

PreviousAttachmentNextBadge