next js 13 with nextui 2 avatar example

In this tutorial, we'll learn how to make avatars in Next.js 13 using NextUI 2. To begin, you must set up a Next.js 13 project with NextUI 2.

how to use nextui 2 in next js 13

To use an avatar in Next.js 13 with NextUI 2, first, make sure you've installed the NextUI 2 Avatar component.

yarn add @nextui-org/avatar
# or
npm i @nextui-org/avatar

1. Create basic avatars in Next.js 13 using the NextUI 2 Avatar component.

import { Avatar } from "@nextui-org/avatar";

export default function App() {
  return (
    <div className="flex gap-3 items-center">
      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
      <Avatar name="Junior" />
      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
      <Avatar name="Jane" />
      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
      <Avatar name="Joe" />
    </div>
  );
}

nextui 2 avatars

2. Next.js 13 with NextUI 2 Avatars in Small, Medium, and Large Sizes.

import { Avatar } from "@nextui-org/avatar";

export default function App() {
  return (
    <div className="flex gap-3 items-center">
      <Avatar
        src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
        className="w-6 h-6 text-tiny"
      />
      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" size="sm" />
      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" size="md" />
      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" size="lg" />
      <Avatar
        src="https://i.pravatar.cc/150?u=a04258114e29026708c"
        className="w-20 h-20 text-large"
      />
    </div>
  );
}

nextui 2 avatars sizes small, medium and large

3. Disabled Avatars in Next.js 13 with NextUI 2.

import { Avatar } from "@nextui-org/avatar";

export default function App() {
  return (
    <div className="flex gap-3 items-center">
      <Avatar
        isDisabled
        src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
      />
      <Avatar isDisabled name="Junior" />
      <Avatar
        isDisabled
        src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
      />
      <Avatar isDisabled name="Jane" />
      <Avatar
        isDisabled
        src="https://i.pravatar.cc/150?u=a04258114e29026702d"
      />
      <Avatar isDisabled name="Joe" />
    </div>
  );
}

4. Adding Borders and Border Colors to Avatars in Next.js 13 with NextUI 2.

import { Avatar } from "@nextui-org/avatar";

export default function App() {
  return (
    <div className="flex gap-3 items-center">
      <Avatar
        isBordered
        src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
      />
      <Avatar
        isBordered
        src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
      />
      <Avatar
        isBordered
        src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
      />
      <Avatar
        isBordered
        src="https://i.pravatar.cc/150?u=a04258114e29026302d"
      />
      <Avatar
        isBordered
        src="https://i.pravatar.cc/150?u=a04258114e29026702d"
      />
      <Avatar
        isBordered
        src="https://i.pravatar.cc/150?u=a04258114e29026708c"
      />
      <Avatar
        isBordered
        color="default"
        src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
      />
      <Avatar
        isBordered
        color="primary"
        src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
      />
      <Avatar
        isBordered
        color="secondary"
        src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
      />
      <Avatar
        isBordered
        color="success"
        src="https://i.pravatar.cc/150?u=a04258114e29026302d"
      />
      <Avatar
        isBordered
        color="warning"
        src="https://i.pravatar.cc/150?u=a04258114e29026702d"
      />
      <Avatar
        isBordered
        color="danger"
        src="https://i.pravatar.cc/150?u=a04258114e29026708c"
      />
    </div>
  );
}

next js 13 with nextui 2 avatars with borders

5. Setting Border Radius for Avatars in Next.js 13 with NextUI 2: Full, Large, Medium, and Small.

import { Avatar } from "@nextui-org/avatar";

export default function App() {
  return (
    <div className="flex gap-3 items-center">
      <Avatar
        isBordered
        radius="full"
        src="https://i.pravatar.cc/150?u=a04258114e29026708c"
      />
      <Avatar
        isBordered
        radius="lg"
        src="https://i.pravatar.cc/150?u=a04258114e29026302d"
      />
      <Avatar
        isBordered
        radius="md"
        src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
      />
      <Avatar
        isBordered
        radius="sm"
        src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
      />
    </div>
  );
}

nextui 2 avatars border radius

6. Avatar Fallbacks in Next.js 13 with NextUI 2.

import { Avatar } from "@nextui-org/avatar";

export default function App() {
  return (
    <div className="flex gap-3 items-center m-96">
      <Avatar showFallback src="https://images.unsplash.com/broken" />
      <Avatar
        showFallback
        name="Jane"
        src="https://images.unsplash.com/broken"
      />
      <Avatar name="Joe" src="https://images.unsplash.com/broken" />
    </div>
  );
}

7. Creating Group Avatars in Next.js 13 with NextUI 2 using the Avatar and AvatarGroup Components.

import { Avatar, AvatarGroup } from "@nextui-org/avatar";

export default function App() {
  return (
    <AvatarGroup isBordered>
      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
    </AvatarGroup>
  );
}

nextui 2 group avatars