Avatar Color

1import { Avatar, AvatarFallback } from "@/registry/ui/avatar";
2 
3export default function AvatarColorDemo() {
4  return (
5    <div className="grid gap-4">
6      <div className="flex items-center gap-4">
7        <Avatar>
8          <AvatarFallback className="bg-slate-500 text-white">C</AvatarFallback>
9        </Avatar>
10        <Avatar>
11          <AvatarFallback className="bg-indigo-500 text-white">
12            C
13          </AvatarFallback>
14        </Avatar>
15        <Avatar>
16          <AvatarFallback className="bg-rose-500 text-white">C</AvatarFallback>
17        </Avatar>
18        <Avatar>
19          <AvatarFallback className="bg-cyan-500 text-white">C</AvatarFallback>
20        </Avatar>
21        <Avatar>
22          <AvatarFallback className="bg-green-500 text-white">C</AvatarFallback>
23        </Avatar>
24      </div>
25      <div className="flex items-center gap-4">
26        <Avatar>
27          <AvatarFallback className="bg-slate-500/25 text-slate-500">
28            C
29          </AvatarFallback>
30        </Avatar>
31        <Avatar>
32          <AvatarFallback className="bg-indigo-500/25 text-indigo-500">
33            C
34          </AvatarFallback>
35        </Avatar>
36        <Avatar>
37          <AvatarFallback className="bg-rose-500/25 text-rose-500">
38            C
39          </AvatarFallback>
40        </Avatar>
41        <Avatar>
42          <AvatarFallback className="bg-cyan-500/25 text-cyan-500">
43            C
44          </AvatarFallback>
45        </Avatar>
46        <Avatar>
47          <AvatarFallback className="bg-green-500/25 text-green-500">
48            C
49          </AvatarFallback>
50        </Avatar>
51      </div>
52    </div>
53  );
54}