अवतार कम्पोनेंट जेनरेटर।

एक ही प्रॉम्प्ट से प्रोडक्शन-रेडी अवतार जेनरेट करें। 6 ओपन-सोर्स पैटर्न — फोटो, Notion-स्टाइल इलस्ट्रेटेड, इनिशियल फॉलबैक, प्रेज़ेंस बैज, स्टैक्ड ग्रुप, अपलोडर — सभी Tailwind + shadcn पर, एक्सेसिबल, थीम-योग्य और MIT-लाइसेंस्ड। कोड कॉपी करें, या इनमें से किसी को भी सीधे अपने Lovable, Bolt, v0 या Cursor प्रोजेक्ट में फिर से जेनरेट करें।

6 टेम्पलेट

अवतार टेम्पलेट जो आप जेनरेट कर सकते हैं

हर टेम्पलेट एक असली प्रॉम्प्ट है, स्क्रीनशॉट नहीं। इसे किसी भी AI एडिटर में कॉपी करें, या MeDo में चलाकर React + Tailwind कोड सीधे पाएं।

बेसिकइमेज + फॉलबैक

इनिशियल फॉलबैक वाली फोटो

लोड हो जाए तो फोटो, न हो तो इनिशियल। वह अवतार जो हर ऐप को सबसे पहले चाहिए।

Tailwind CSS के साथ एक पुनः प्रयोग-योग्य <Avatar /> React कम्पोनेंट बनाएं। पैटर्न: इमेज और इनिशियल फॉलबैक वाला बेसिक अवतार। लेआउट: गोल अवतार जो src लोड होने पर एक <img> रेंडर करे; एरर होने पर या src न होने पर, नाम स्ट्रिंग से निकले डिटर्मिनिस्टिक बैकग्राउंड कलर के साथ जेनरेट किया गया इनिशियल फॉलबैक रेंडर करे। API: src, name (आवश्यक, alt टेक्स्ट और इनिशियल के लिए इस्तेमाल), size ("xs" | "sm" | "md" | "lg" | "xl"), और className पासथ्रू के लिए props। शामिल करें: name से आवश्यक alt टेक्स्ट, loading="lazy", लोकल स्टेट के ज़रिए onError फॉलबैक स्वैप, लिंक या बटन के अंदर रेंडर होने पर focus-visible रिंग, Tailwind dark: क्लास से लाइट और डार्क सपोर्ट। बंधन: केवल React + Tailwind, कोई बाहरी UI या इमेज डिपेंडेंसी नहीं, इमेज लोड होते समय कोई लेआउट शिफ़्ट नहीं (फिक्स्ड width/height से बॉक्स रिज़र्व करें)।

MeDo में आज़माएं

स्टेटसप्रेज़ेंस बैज

प्रेज़ेंस डॉट वाला अवतार

online, away, busy, offline — अवतार के किनारे पर टिका एक प्रेज़ेंस डॉट।

Tailwind CSS के साथ एक <AvatarWithStatus /> React कम्पोनेंट बनाएं। पैटर्न: प्रेज़ेंस बैज वाला अवतार। लेआउट: गोल अवतार जिसमें नीचे-दाईं ओर एक छोटा स्टेटस डॉट पिन हो, और वह फोटो से बैकग्राउंड कलर की रिंग से अलग हो ताकि किसी भी सरफेस पर पढ़ा जा सके। API: src, name, size, और status ("online" | "away" | "busy" | "offline") के लिए props, जिसमें डॉट का रंग हर स्टेटस के अनुसार मैप हो और डॉट अवतार साइज़ के साथ स्केल करे। शामिल करें: इनिशियल फॉलबैक, स्क्रीन रीडर के लिए स्टेटस बताने वाला विज़ुअली हिडन टेक्स्ट लेबल (केवल रंग पर निर्भर न रहें), रैपर पर aria-label, लाइट और डार्क सपोर्ट। बंधन: केवल React + Tailwind, कोई बाहरी UI डिपेंडेंसी नहीं, डॉट अवतार के किनारे के 30% से ज़्यादा हिस्से को कभी ओवरलैप न करे।

MeDo में आज़माएं

ग्रुपस्टैक्ड + ओवरफ़्लो

+N चिप वाला अवतार ग्रुप

+N ओवरफ़्लो चिप के साथ ओवरलैप करता अवतार स्टैक। टीम, असाइनी और कोलैबोरेटर के लिए।

Tailwind CSS के साथ एक <AvatarGroup /> React कम्पोनेंट बनाएं। पैटर्न: ओवरफ़्लो गिनती वाला स्टैक्ड (ओवरलैप करता) अवतार ग्रुप। लेआउट: अवतार की हॉरिज़ॉन्टल रो जो लगभग एक-तिहाई ओवरलैप करे, हर एक पर बैकग्राउंड कलर की रिंग हो ताकि स्टैक पढ़ने-योग्य रहे; max दिखने वाले अवतार के बाद, उसी साइज़ और आकार में एक "+N" काउंटर चिप रेंडर करें। API: users ({ src, name } का ऐरे), max (डिफ़ॉल्ट 4), size, और एक ऑप्शनल onAddClick के लिए props जो रो के अंत में डैश्ड "Invite" अफ़ोर्डेंस रेंडर करे। व्यवहार: hover पर वह अवतार छोटे translate और z-index बदलाव के साथ अपने पड़ोसियों से ऊपर उठ जाए; "dir" prop से स्टैक की ओवरलैप दिशा उलट जाए। शामिल करें: हर अवतार पर इनिशियल फॉलबैक, पूरी मेंबर गिनती बताने वाला aria-label, focus-visible रिंग के साथ कीबोर्ड-फ़ोकस-योग्य आइटम, लाइट और डार्क सपोर्ट। बंधन: केवल React + Tailwind, कोई बाहरी UI डिपेंडेंसी नहीं, कोई एनिमेशन लाइब्रेरी नहीं।

MeDo में आज़माएं

साइज़ व आकारस्केल + आकार

स्केल सिस्टम

एक ही टाइप स्केल पर xs से xl तक, साथ में circle, squircle और गोल-कोने वर्ग वेरिएंट।

Tailwind CSS का उपयोग करते हुए, पूरे साइज़ और शेप स्केल वाला एक थीम-योग्य <Avatar /> React कम्पोनेंट बनाएं। पैटर्न: अवतार डिज़ाइन-सिस्टम प्रिमिटिव। API: size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl") जो एक ही लुकअप ऑब्जेक्ट से मैप हो और width, height, फ़ॉन्ट साइज़ व border-radius को साथ में कंट्रोल करे; shape ("circle" | "squircle" | "square"); साथ में src, name और className। आवश्यकता: इनिशियल का फ़ॉन्ट साइज़ अवतार बॉक्स के अनुपात में स्केल करे ताकि xs और 2xl दोनों संतुलित रहें; सभी टोकन फ़ाइल के शुरू में एक ही config ऑब्जेक्ट में रहें ताकि टीम एक ही जगह से री-थीम कर सके। शामिल करें: इनिशियल फॉलबैक, name से alt टेक्स्ट, रूट एलिमेंट पर forwardRef, एक्सपोर्ट किए गए TypeScript prop टाइप, लाइट और डार्क सपोर्ट। बंधन: केवल React + Tailwind, कोई बाहरी UI डिपेंडेंसी नहीं, कम्प्यूटेड पिक्सेल साइज़ के अलावा कोई इनलाइन स्टाइल नहीं।

MeDo में आज़माएं

अपलोडरएडिट-योग्य

अपलोड और रिमूव वाला अवतार

कैमरा बैज, अपलोड बटन और फ़ाइल बंधनों वाला अवतार। सेटिंग्स पेज के लिए।

Tailwind CSS के साथ एक <AvatarUploader /> React कम्पोनेंट बनाएं। पैटर्न: सेटिंग्स पेज के लिए एडिट-योग्य प्रोफ़ाइल फोटो कंट्रोल। लेआउट: बाईं ओर बड़ा अवतार जिसके नीचे-दाईं ओर गोल कैमरा बैज पिन हो; दाईं ओर एक "Profile Photo" लेबल, एक फ़ाइल-बंधन हिंट लाइन ("PNG or JPG, up to 2 MB"), और एक Upload प्राइमरी बटन साथ में एक Remove टेक्स्ट बटन। व्यवहार: छिपा हुआ <input type="file" accept="image/png,image/jpeg"> जो बैज और Upload बटन दोनों से ट्रिगर हो; इनलाइन एरर मैसेज के साथ क्लाइंट-साइड साइज़/टाइप वैलिडेशन; URL.createObjectURL से लोकल प्रीव्यू, जो अनमाउंट पर रिवोक हो; Remove इनिशियल फॉलबैक बहाल कर दे। शामिल करें: फ़ाइल इनपुट के लिए <label> एसोसिएशन, वैलिडेशन मैसेज के लिए aria-live रीजन, focus-visible रिंग, बटन पर disabled/uploading स्टेट, लाइट और डार्क सपोर्ट। बंधन: केवल React + Tailwind, कोई अपलोड लाइब्रेरी नहीं, कोई क्रॉपिंग डिपेंडेंसी नहीं — कॉलर के लिए एक onChange(file) कॉलबैक एक्सपोज़ करें।

MeDo में आज़माएं

प्रोफ़ाइल रोअवतार + मेटा

अवतार, नाम, रोल रो

अवतार, नाम, वेरिफ़िकेशन टिक और रोल — वह रो जो टेबल और मेंबर लिस्ट भरती है।

Tailwind CSS के साथ एक <AvatarRow /> React कम्पोनेंट (और एक <MemberList /> रैपर) बनाएं। पैटर्न: मेंबर लिस्ट, टेबल और कमेंट थ्रेड के लिए अवतार सहित मेटाडेटा रो। लेआउट: बाईं ओर अवतार, दो-लाइन ब्लॉक जिसमें व्यक्ति का नाम (साथ में एक ऑप्शनल वेरिफ़ाइड टिक) और एक म्यूटेड सेकंडरी लाइन ("Team · Role") हो, और दाईं ओर एक ट्रेलिंग एक्शन बटन; बीच का ब्लॉक रैप होने के बजाय min-w-0 + truncate से ट्रंकेट हो। API: users ({ src, name, role, team, verified } का ऐरे), एक ट्रेलिंग एक्शन लेबल, और एक onAction(user) कॉलबैक के लिए props। शामिल करें: इनिशियल फॉलबैक, रैपर में सिमैंटिक <ul>/<li> मार्कअप, ट्रेलिंग बटन पर एक्सेसिबल नाम ("Manage access for {name}"), hover पर रो हाइलाइट, focus-visible रिंग, लाइट और डार्क सपोर्ट। बंधन: केवल React + Tailwind, कोई टेबल या लिस्ट लाइब्रेरी नहीं, 320px चौड़ाई पर बिना ओवरफ़्लो काम करे।

MeDo में आज़माएं

अलग-अलग वेबसाइटों के लिए अवतार पैटर्न

वही अवतार कंपोनेंट, उस वेबसाइट के प्रकार के हिसाब से ढाला गया जहाँ वह लगेगा।

01 / 06

SaaS टीम सेटिंग्स

मेंबर लिस्ट की जान अवतार रो में है — फोटो, नाम, रोल, एक्सेस एक्शन। जब किसी ने अभी फोटो अपलोड न की हो, तो इनिशियल फॉलबैक टेबल को साफ़-सुथरा रखता है।

अवतार की शैलियाँ और वेरिएंट

जो वेरिएंट बाकी पेज से मेल खाता है उसे चुनें और जेनरेट करें।

01 / 06

बेसिक अवतार

इनिशियल फॉलबैक और हर नाम के लिए डिटर्मिनिस्टिक बैकग्राउंड कलर वाली इमेज। वह बेसलाइन जिसे बाकी हर वेरिएंट आगे बढ़ाता है।

React, Next.js, Vue और Svelte में अवतार

React, Next.js, Vue 3, SvelteKit, Astro या सादा HTML — वही अवतार, जोड़ने के छह तरीके।

01 / 06

React अवतार

साइज़ लुकअप और onError फॉलबैक वाला एक ही फ़ंक्शनल कम्पोनेंट। इमेज-फ़ेल्ड फ़्लैग के अलावा कोई क्लाइंट स्टेट नहीं, इसलिए React 18+ ट्री में कहीं भी सुरक्षित।

src/components/Avatar.tsx

export function Avatar({ src, name, size = "md" }) {
  const [failed, setFailed] = useState(false);
  return failed || !src
    ? <span className={box[size]}>{initials(name)}</span>
    : <img src={src} alt={name} onError={() => setFailed(true)} />;
}

अवतार कंपोनेंट का उपयोग कौन करता है

टीम और मेंबर लिस्ट

सेटिंग्स पेज, ऑर्ग चार्ट और परमिशन टेबल — सबको वही एक रो चाहिए: अवतार, नाम, रोल, एक्शन। इसे एक बार जेनरेट करें और ऐप की हर टेबल में दोबारा इस्तेमाल करें।

रियल-टाइम कोलैबोरेशन

+N चिप वाले स्टैक्ड अवतार सबसे सस्ता प्रेज़ेंस UI हैं — एक रो यूज़र को बता देती है कि और कौन एडिट कर रहा है, बिना किसी साइडबार या websocket डैशबोर्ड के।

सोशल फ़ीड और कमेंट

कमेंट थ्रेड, रिएक्शन और मेंशन एक ही पेज पर अवतार को सैकड़ों बार दोहराते हैं। साइज़ स्केल वाला एक ही प्रिमिटिव लेआउट को एक जैसा और बंडल को छोटा रखता है।

चैट और सपोर्ट इनबॉक्स

प्रेज़ेंस बैज एजेंट को बताते हैं कि कस्टमर अभी ऑनलाइन है या नहीं, और जब किसी की प्रोफ़ाइल फोटो न हो तो इनिशियल फॉलबैक इनबॉक्स को पढ़ने-योग्य बनाए रखता है।

अकाउंट सेटिंग्स और ऑनबोर्डिंग

अपलोड अवतार फ़ाइल टाइप व साइज़ वैलिडेशन, लोकल प्रीव्यू और रिमूव — सब संभालता है, यानी पूरा प्रोफ़ाइल-फोटो फ़्लो बिना किसी अपलोड लाइब्रेरी के।

मार्केटप्लेस और रिव्यू

वेरिफ़िकेशन टिक वाले रिव्यूअर अवतार, एक अतिरिक्त स्टार से ज़्यादा भरोसा जगाते हैं। प्रोफ़ाइल रो को सीधे प्रोडक्ट पेज में डाल दें।

अपने अवतार को प्रोजेक्ट में कैसे जोड़ें

अवतार टेम्पलेट चुनने से प्रोडक्शन में भेजने तक, चार चरण।

01~30s

एक अवतार पैटर्न चुनें

ऊपर दिए 6 टेम्पलेट देखें और अपनी सरफेस के सबसे नज़दीक वाला चुनें — फोटो, इलस्ट्रेटेड, टेबल रो, प्रेज़ेंस स्टैक, या अपलोड कंट्रोल।

02~2s

इसे लाइव देखें

हर कार्ड असली React + Tailwind प्रीव्यू रेंडर करता है, इसलिए कुछ भी कॉपी करने से पहले आप स्पेसिंग और साइज़िंग देख लेते हैं।

03~10s

प्रॉम्प्ट या कोड कॉपी करें

प्रॉम्प्ट को MeDo, Lovable, Bolt, v0 या Cursor में कॉपी करें, या कम्पोनेंट कोड सीधे कार्ड से ले लें।

04~1min

इसे अपने ऐप में डालें

<Avatar /> को एक बार इम्पोर्ट करें, फिर size और shape props के साथ इसे टेबल, हेडर और कमेंट थ्रेड में दोबारा इस्तेमाल करें।

अवतार के बारे में सामान्य प्रश्न

अवतार कम्पोनेंट क्या है?

अवतार कम्पोनेंट एक छोटी इमेज रेंडर करता है जो किसी यूज़र, टीम या संस्था को दर्शाती है — आम तौर पर एक गोल प्रोफ़ाइल फोटो। एक प्रोडक्शन-रेडी अवतार उन स्थितियों को भी संभालता है जब फोटो मौजूद न हो या लोड न हो पाए, और तब आम तौर पर जेनरेट किए गए बैकग्राउंड कलर पर व्यक्ति के इनिशियल दिखाता है।

अवतार फॉलबैक इनिशियल कैसे काम करते हैं?

कम्पोनेंट यूज़र का नाम लेता है, उसे स्पेस पर अलग करता है, और पहले व आख़िरी हिस्से का पहला अक्षर बड़े अक्षरों में रेंडर करता है। बैकग्राउंड कलर नाम स्ट्रिंग से डिटर्मिनिस्टिक तरीके से निकाला जाता है, इसलिए एक ही व्यक्ति को हर सेशन और डिवाइस पर हमेशा वही रंग मिलता है।

अवतार ग्रुप या स्टैक्ड अवतार क्या है?

अवतार ग्रुप ओवरलैप करते अवतार की एक हॉरिज़ॉन्टल रो है, जिसमें हर अवतार के चारों ओर बैकग्राउंड कलर की रिंग होती है ताकि स्टैक पढ़ने-योग्य रहे। अधिकतम दिखने वाली गिनती के बाद यह एक "+N" चिप रेंडर करता है। टीम मेंबर, टास्क असाइनी और लाइव कोलैबोरेटर दिखाने के लिए यह स्टैंडर्ड पैटर्न है।

क्या ये अवतार कम्पोनेंट एक्सेसिबल हैं?

हाँ। हर अवतार में यूज़र के नाम से निकाला गया alt टेक्स्ट होता है, प्रेज़ेंस स्टेटस केवल रंग से नहीं बल्कि विज़ुअली हिडन लेबल से बताया जाता है, टूलटिप aria-describedby से जुड़े होते हैं, और इंटरैक्टिव अवतार पर दिखने वाली focus-visible रिंग बनी रहती है।

क्या ये अवतार कम्पोनेंट कमर्शियल उपयोग के लिए मुफ़्त हैं?

हाँ। गैलरी का हर टेम्पलेट MIT लाइसेंस्ड है — इसे पर्सनल प्रोजेक्ट, क्लाइंट वर्क और कमर्शियल प्रोडक्ट में इस्तेमाल करें, बिना किसी एट्रिब्यूशन और बिना किसी लाइसेंसिंग फ़ीस के।

क्या ये React, Vue और Svelte के साथ काम करते हैं?

कम्पोनेंट React + Tailwind में लिखे गए हैं, लेकिन मार्कअप फ़्रेमवर्क-अज्ञेय है। ऊपर दिया Frameworks सेक्शन वही अवतार Next.js, Vue 3, SvelteKit, Astro और सादे HTML में दिखाता है।

अवतार इमेज का साइज़ और ऑप्टिमाइज़ेशन कैसे करना चाहिए?

रेटिना स्क्रीन पर शार्प रहने के लिए रेंडर किए गए बॉक्स से लगभग दोगुने वर्गाकार क्रॉप सर्व करें (40px अवतार के लिए 80px), लेआउट शिफ़्ट से बचने के लिए स्पष्ट width और height सेट करें, object-cover इस्तेमाल करें, और फ़ोल्ड के नीचे वाले अवतार पर loading="lazy" जोड़ें।

फोटो अवतार इस्तेमाल करें या इलस्ट्रेटेड अवतार?

जहाँ पहचान मायने रखती है वहाँ असली फोटो अवतार इस्तेमाल करें — टीम डायरेक्टरी, सपोर्ट इनबॉक्स, मार्केटप्लेस रिव्यू — क्योंकि चेहरा किसी व्यक्ति को पहचानने का सबसे तेज़ तरीका है। Notion स्टाइल वाले इलस्ट्रेटेड अवतार तब इस्तेमाल करें जब ज़्यादातर यूज़र कभी फोटो अपलोड नहीं करते, जब आप एक जैसा ऑन-ब्रांड लुक चाहते हैं, या जब असली चेहरे दिखाने से प्राइवेसी की चिंता बढ़ती है। एक अच्छा सिस्टम दोनों को सपोर्ट करता है: फोटो उपलब्ध हो तो फोटो, वरना एक डिटर्मिनिस्टिक इलस्ट्रेशन या इनिशियल।

अपना अवतार कम्पोनेंट 30 सेकंड में जेनरेट करें।

6 अवतार टेम्पलेट में से किसी को भी प्रॉम्प्ट से फिर जेनरेट करें, या अपना बताएं — फोटो, इलस्ट्रेटेड, प्रेज़ेंस बैज, स्टैक्ड ग्रुप, अपलोडर। मुफ़्त, MIT-लाइसेंस्ड, साइनअप नहीं।

जेनरेटर खोलें मूल्य देखें