Components
Loading preview...
A unique gradient avatar generated from a name string.
npx shadcn@latest add https://21st.dev/r/tom_ui/fallback-avatar"use client";
import FallbackAvatar from "@/components/ui/fallback-avatar";
const people = [
"Maya Chen",
"Noah Kim",
"Ava Patel",
"Leo Garcia",
"Zoe Smith",
"Eli Brown",
"Nina Rossi",
"Owen Lee",
];
function Demo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="rounded-3xl border bg-card/70 p-8 shadow-sm backdrop-blur">
<div className="mb-6">
<p className="text-sm text-muted-foreground">Generated team avatars</p>
<h3 className="text-2xl font-semibold tracking-tight">Fallback Avatar</h3>
</div>
<div className="grid grid-cols-4 gap-5">
{people.map((name) => (
<div key={name} className="flex flex-col items-center gap-2">
<FallbackAvatar className="border shadow-sm" name={name} size={72} />
<span className="max-w-24 truncate text-xs text-muted-foreground">
{name}
</span>
</div>
))}
</div>
</div>
</div>
);
}
export default { Demo };