Components
Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.
npx @21st-dev/cli add reshaped/reshaped-avatarLoading preview...
import { Reshaped } from "reshaped/bundle";
import Avatar from "@/components/ui/reshaped-avatar";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<Avatar
src="https://www.reshaped.so/img/examples/avatar-3.png"
attributes={{ "aria-label": "Paul Eastwood" }}
/>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...