PaperAvatar

Square avatar primitive with initials fallback and stack support.

← square avatars keep the system sharp.

Preview

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const avatarVariants = cva('inline-flex items-center justify-center overflow-hidden border-2 border-ink-black bg-paper-aged font-display italic text-ink-black rounded-none', {
  variants: {

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperAvatar/paperAvatar.tsx⎘
Step 2.Create the barrel:
components/ui/paperAvatar/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperAvatar'
```

Variants

Small

Medium

Large

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`md`	Avatar dimensions and type scale.
`src`	`string`	`undefined`	Image source URL.
`initials`	`string`	`PF`	Fallback label when image is missing.

Examples

Team row

Use stacked avatars for compact participant lists.

<PaperAvatarGroup>...</PaperAvatarGroup>

Profile header

XL avatar anchors account settings sections.

<PaperAvatar size="xl" initials="PF" />