آواتار
avatarکامپوننتتصویر دایرهای؛ اگر نباشد حرف اول سفید با حلقهی سفید روی پسزمینهی شفاف.
ا
+۲ نفر دیگرنصب
با CLI
اگر هنوز init نکردهاید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگیهایش را مینویسد.
$ npx vibefarsi add avatarنصب دستی
محتوای تب «کد» را در
components/ui/avatar.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Avatar, AvatarGroup } from "@/components/ui/avatar"23<Avatar name="سارا محمدی" src="/avatars/sara.jpg" />4<Avatar name="علی رضایی" />5<AvatarGroup people={[{ name: "سارا", src: "/avatars/sara.jpg" }, { name: "علی", src: "/avatars/ali.jpg" }, { name: "نگار" }, { name: "رضا" }, { name: "مینا" }]} max={4} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| name | string | - | title و حرف اول وقتی تصویر نیست. |
| src | string | - | آدرس تصویر؛ اگر نباشد حرف اول سفید. |
| size | "sm" | "md" | "lg" | "md" | اندازه. |