Avatar

Data Display

User avatar with image support, fallback to initials, status indicators, and group stacking.

Dependencies:

framer-motion

Full

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { Avatar } from '@/components/Avatar'

Animated feature card with hover effects, icon, and accent borders.

Animated number counter that counts up when the element enters the viewport.

Syntax-highlighted code block with copy button and optional line numbers.