Avatar Square 1 •
Avatar
Shadcn Avatar Components
Browse 34 original avatar components built with React, Tailwind CSS, and shadcn/ui. Preview every design, inspect its source, or install it with the shadcn CLI.
Showing 34 of 34 components
Avatar Square 2 •
Avatar with Placeholder Initials
Avatar Square 3 •
Avatar with Placeholder Icon
Avatar Square 4 •
Avatar with Online Indicator
Avatar Square 5 •
Avatar with Offline Indicator
Avatar Square 6 •
Avatar with Verification Check
Avatar Square 7 •
Avatar with Count Indicator
Avatar Standard 1 •
Avatar
Avatar Standard 2 •
Avatar with Placeholder Initials
Avatar Standard 3 •
Avatar with Placeholder Icon
Avatar Standard 4 •
Avatar with Online Indicator
Avatar Standard 5 •
Avatar with Offline Indicator
Avatar Standard 6 •
Avatar with Verification Check
Avatar Standard 7 •
Avatar with Count Indicator
Avatar Standard 8 •
Avatar Small
Avatar Standard 9 •
Avatar Large
Avatar Standard 10 •
Avatar Extra Large
Avatar Standard 11 •
Avatar with Border
Avatar Standard 12 •
Avatar with Shadow
Avatar Standard 13 •
Avatar with Gradient Fallback
Avatar Standard 14 •
Avatar with Away Status
Avatar Standard 15 •
Avatar with Busy Status
Avatar Standard 16 •
Avatar with Do Not Disturb
Avatar Standard 17 •
Avatar with Hover Effect
Avatar Standard 18 •
Avatar with Loading State
Avatar Standard 19 •
Avatar with Badge Top Left
Avatar Standard 20 •
Avatar with Badge Bottom Left
Avatar Standard 21 •
Avatar with Colored Border
Avatar Standard 22 •
Avatar with Multiple Badges
Avatar Standard 23 •
Avatar with Tooltip
Avatar Standard 24 •
Avatar with Ring Animation
Avatar Standard 25 •
Avatar with Custom Colors
Avatar Standard 26 •
Avatar with Glow Effect
Avatar Standard 27 •
Avatar with Error State
Category guide
Using Avatar patterns
These patterns share semantic tokens and accessible interaction foundations while varying layout, density, hierarchy, and content composition.
Open any variation to compare responsive states, inspect its generated source, and copy a local shadcn registry command.