Patterns

Avatar

Colour from the name (same person, same colour); status dot, verified tick, gradient ring, square for organisations.

KANJSIFARHGCBT

KANJSIFA+2

avatar.tsx

"use client";

import { Avatar, AvatarStack } from "@waveinno/ui";

export default function AvatarExample() {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end gap-4">
        <Avatar name="Karim Ahmed" size="2xl" ring="gradient" verified />
        <Avatar name="Nusrat Jahan" size="xl" status="online" />
        <Avatar name="Shahidul Islam" size="lg" status="away" />
        <Avatar name="Farhana Akter" size="md" status="busy" />
        <Avatar name="Rafiq Hasan" size="md" status="offline" />
        <Avatar name="Gulshan Car Park" size="xl" shape="square" verified />
        <Avatar name="Banani Trade Centre" size="lg" shape="square" />
      </div>
      <AvatarStack names={["Karim Ahmed", "Nusrat Jahan", "Shahidul Islam", "Farhana Akter", "Rafiq Hasan", "Tania Sultana"]} size="md" />
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Avatar, AvatarStack } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<Avatar>

src/components/ui/avatar.tsx

Prop	Type	Default
`name`required	`string`	—
`src`	`string \| null`	—
`size`	`keyof typeof sizes`	`"md"`
`status`	`keyof typeof STATUS`	—
`verified`	`boolean`	—
`ring`	`"gradient"`	—
`shape`	`"circle" \| "square"`	`"circle"`
`className`	`string`	—

<AvatarStack>

src/components/ui/avatar.tsx

Prop	Type	Default
`names`required	`string[]`	—
`max`	`number`	`4`
`size`	`keyof typeof sizes`	`"sm"`

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui