Avatar Shape

1import { Avatar, AvatarFallback } from "@/registry/ui/avatar";
2 
3export default function AvatarShapeDemo() {
4  return (
5    <div className="grid gap-5">
6      <div className="flex items-center gap-4">
7        <Avatar className="rounded-none">
8          <AvatarFallback className="rounded-none bg-indigo-500 text-white">
9            A
10          </AvatarFallback>
11        </Avatar>
12        <Avatar className="rounded-md">
13          <AvatarFallback className="rounded-lg bg-indigo-500 text-white">
14            A
15          </AvatarFallback>
16        </Avatar>
17        <Avatar className="rounded-full">
18          <AvatarFallback className="rounded-full bg-indigo-500 text-white">
19            A
20          </AvatarFallback>
21        </Avatar>
22      </div>
23      <div className="flex items-center gap-4">
24        <Avatar className="rounded-none">
25          <AvatarFallback className="rounded-none bg-indigo-500/25 text-indigo-500">
26            A
27          </AvatarFallback>
28        </Avatar>
29        <Avatar className="rounded-md">
30          <AvatarFallback className="rounded-lg bg-indigo-500/25 text-indigo-500">
31            A
32          </AvatarFallback>
33        </Avatar>
34        <Avatar className="rounded-full">
35          <AvatarFallback className="rounded-full bg-indigo-500/25 text-indigo-500">
36            A
37          </AvatarFallback>
38        </Avatar>
39      </div>
40    </div>
41  );
42}