NeonKitComponents

Avatar Components

User profile pictures with neon effects, fallback support, and status indicators.

Neon Avatars

Electric neon avatars with glowing borders and effects

User

John Doe

Neon Cyan Glow

J

Jane Doe

Neon Purple Glow

Mike Johnson

Neon Chartreuse Glow

S

Sarah Miller

Neon Pink Glow

VIP Members:

S
A

Basic Avatars

Standard avatar display with image and fallback support

User

John Doe

With profile image

J

Jane Doe

With initials fallback

Anonymous User

Default icon fallback

Team Members:

S
A

Avatar Sizes

Avatars in different sizes for various use cases

Small Size (sm):

J
Perfect for comments and lists

Default Size:

J
Standard user profiles

Large Size (lg):

J
Featured profiles

Extra Large Size (xl):

J
Hero sections and modals

Status Indicators

Avatars with online/offline status indicators

Online Status:

J

Away Status:

S

Busy Status:

M

Offline Status:

A

Team Status Overview:

J
S

Installation

Copy and paste the avatar code directly. Install required dependencies:

npm install framer-motion clsx tailwind-merge lucide-react

Make sure you have the cn utility function. See installation guide.