Components

Avatar

Person or workspace picture with an initial fallback: rounded squares for workspaces, circles for people.

DTAL

Usage

Use it to:

  • identify a person or workspace in lists, menus, comments and headers

Don’t use it to:

  • decorative illustrations
  • buttons on their own (wrap in a Button with a label instead)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/AvatarExample.tsx
import { Avatar } from '@krackedui/motion';

export function AvatarDemo() {
  return (
    <>
      <Avatar name="Design Team" size="xl" />
      <Avatar name="Ada Lovelace" shape="user" size="xl" />
    </>
  );
}

Examples

Size

DDDTDTDT
AAALALAL

Image

Dark theme

DTAL

API Reference

Avatar

A <span>; supports all of its props. Adds:

PropTypeDefault
name
string
src
string
size
"xs""sm""md""lg""xl"1620242832
"sm"
shape
"workspace""user"
"workspace"

Accessibility

  • With name: role="img" named after the person. Without: hidden from assistive tech (use it only next to a visible name).
  • The picture itself has empty alt text; the name is on the avatar.
© 2026 Motion. Internal documentation.