Avatar

Displays a user's initials or image, with a group that folds overflow into a +N bubble.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Avatar, AvatarGroup } from "@aile.sh/elia";

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Avatar size="sm" name="Ada Lovelace" />
      <Avatar size="md" name="Grace Hopper" />
      <Avatar size="lg" name="Alan Turing" />
      <AvatarGroup max={3}>
        <Avatar name="Ada Lovelace" />
        <Avatar name="Grace Hopper" />
        <Avatar name="Alan Turing" />
        <Avatar name="Edsger Dijkstra" />
        <Avatar name="Barbara Liskov" />
      </AvatarGroup>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia