Avatar Fallback

1import { BuildingIcon, StoreIcon, UserRoundIcon } from "lucide-react";
2import { Avatar, AvatarFallback } from "@/registry/ui/avatar";
3 
4export default function AvatarFallbackDemo() {
5  return (
6    <div className="grid gap-5">
7      <div className="flex items-center gap-4">
8        <Avatar>
9          <AvatarFallback className="bg-indigo-500/25 text-indigo-500">
10            C
11          </AvatarFallback>
12        </Avatar>
13        <Avatar>
14          <AvatarFallback className="bg-indigo-500/25 text-indigo-500">
15            CN
16          </AvatarFallback>
17        </Avatar>
18        <Avatar>
19          <AvatarFallback className="bg-indigo-500/25 text-indigo-500">
20            <UserRoundIcon className="size-4.5" />
21          </AvatarFallback>
22        </Avatar>
23        <Avatar>
24          <AvatarFallback className="bg-indigo-500/25 text-indigo-500">
25            <BuildingIcon className="size-4.5" />
26          </AvatarFallback>
27        </Avatar>
28        <Avatar>
29          <AvatarFallback className="bg-indigo-500/25 text-indigo-500">
30            <StoreIcon className="size-4.5" />
31          </AvatarFallback>
32        </Avatar>
33      </div>
34    </div>
35  );
36}