Avatar

zippystarter/avatar

FreeComponent

Circular Avatar

Live preview

live · rendered by the registry

Rendered by zippystarter on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://zippystarter.com/r/avatar.json

Source

src/registry/zippystarter/components/avatar/demo.tsxzippystarter.com/r/avatar.json

1import { Avatar } from "@/components/avatar";
2import { avatars } from "@/registry/zippystarter/data/avatars";
3 
4const defaultProps = {
5  src: avatars.travelBug.avatarSrc,
6  alt: avatars.travelBug.avatarName,
7};
8 
9export function Demo() {
10  return (
11    <div className="@container h-full place-content-center p-8">
12      <div className="grid grid-flow-col justify-around max-w-2xl mx-auto items-end gap-1">
13        <Avatar {...defaultProps} size="xs" />
14        <Avatar {...defaultProps} size="sm" />
15        <Avatar {...defaultProps} size="md" />
16        <Avatar {...defaultProps} size="lg" />
17        <Avatar {...defaultProps} size="xl" />
18        <Avatar {...defaultProps} size="2xl" />
19      </div>
20    </div>
21  );
22}

What it pulls in

npm packages

@radix-ui/react-avatar

Other registry items

https://zippystarter.com/r/avatars.json

Files it writes

src/registry/zippystarter/components/avatar/demo.tsx
src/registry/zippystarter/components/avatar/index.tsx

More from zippystarter

All 77 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Containercontainer	zippystarter	Components	Free	no deps
Imageimage	zippystarter	Components	Free	no deps
Linklink	zippystarter	Components	Free	no deps