An image element with a fallback for representing the user.
1import {2 Avatar,3 AvatarBadge,4 AvatarFallback,Installation
pnpm dlx sprawlify@latest add avatarnpx sprawlify@latest add avataryarn sprawlify@latest add avatarbunx --bun sprawlify@latest add avatar
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import * as React from "react";4import { Avatar as AvatarPrimitive } from "@sprawlify/react/avatar";5import { cn } from "@/lib/utils";6import { sprawlify } from "@sprawlify/react";78function Avatar({9 className,10 size = "default",11 ...props12}: React.ComponentProps<typeof AvatarPrimitive.Root> & {13 size?: "default" | "sm" | "lg";14}) {15 return (16 <AvatarPrimitive.Root17 data-slot="avatar"18 data-size={size}19 className={cn(20 "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",21 className,22 )}23 {...props}24 />25 );26}2728function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {29 return (30 <AvatarPrimitive.Image31 data-slot="avatar-image"32 className={cn("aspect-square rounded-[inherit] size-full overflow-hidden", className)}33 {...props}34 />35 );36}3738function AvatarFallback({39 className,40 ...props41}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {42 return (43 <AvatarPrimitive.Fallback44 data-slot="avatar-fallback"45 className={cn(46 "rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",47 className,48 )}49 {...props}50 />51 );52}5354function AvatarBadge({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {55 return (56 <sprawlify.span57 data-scope="avatar"58 data-part="badge"59 data-slot="avatar-badge"60 className={cn(61 "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",62 "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",63 "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",64 "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",65 className,66 )}67 {...props}68 />69 );70}7172function AvatarGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {73 return (74 <sprawlify.div75 data-scope="avatar"76 data-paert="group"77 data-slot="avatar-group"78 className={cn(79 "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",80 className,81 )}82 {...props}83 />84 );85}8687function AvatarGroupCount({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {88 return (89 <sprawlify.div90 data-scope="avatar"91 data-paert="group-count"92 data-slot="avatar-group-count"93 className={cn(94 "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",95 className,96 )}97 {...props}98 />99 );100}101102export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };103Update the import paths to match your project setup.
Usage
1import {
2 Avatar,
3 AvatarImage,
4 AvatarFallback
5} from "@/components/ui/avatar"1<Avatar>
2 <AvatarImage src="..." />
3 <AvatarFallback>PK</AvatarFallback>
4</Avatar>Examples
Avatar Group
Use the AvatarGroup component to add a group of avatars.
1import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/ui/avatar";23export default function Preview() {4 return (Avatar Group With Icon
You can also use an icon inside <AvatarGroupCount>.
1import {2 Avatar,3 AvatarFallback,4 AvatarGroup,Badge
Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.
1import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar";23export default function Preview() {4 return (Badge With Icon
You can also use an icon inside <AvatarBadge>.
1import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar";2import { PlusIcon } from "lucide-react";34export default function Preview() {Basic
A basic avatar component with an image and a fallback.
1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";23export default function Preview() {4 return (Sizes
Use the size prop to change the size of the avatar.
1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";23export default function Preview() {4 return (On This Page
InstallationUsageExamplesAvatar GroupAvatar Group With IconBadgeBadge With IconBasicSizesGet PRO
Need premium blocks and templates? Upgrade to PRO and get access.