GUI Mellow
Palette
Colour theme
Components

Indicators

Avatar

A portrait, or initials.

import { Avatar } from "gui-mellow/Avatar";

Image and initials

Northern RangeKORAL
Source of these examples
import { Avatar } from "gui-mellow/Avatar";
import { Stack } from "gui-mellow/Stack";
import { Example } from "../lib/Example";
import { asset } from "../lib/asset";

export default function AvatarDemo() {
  return (
    <Example title="Image and initials">
      <Stack direction="row" gap={4}>
        <Avatar name="Northern Range" src={asset("/northern-mountains.jpg")} size={96} />
        <Avatar name="Kai Ortega" size={64} />
        <Avatar name="Robin" />
        <Avatar name="Ada Lovelace" size={32} />
      </Stack>
    </Example>
  );
}