Skip to content
aq-ui
Back to ComponentsComponent

Avatar

Open-code aq-ui accessible component family for Avatar.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add avatar

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { Avatar } from "@/components/ui/avatar"

<Avatar />

Avatar

constSource L8

Open-code aq-ui accessible component family for Avatar.

const Avatar = React.forwardRef<React.ComponentRef<typeof AvatarPrimitive.Root>, AvatarPrimitive.Root.Props & { size?: "default" | "sm" | "lg" }>(…)
Props type
AvatarPrimitive.Root.Props & { size?: "default" | "sm" | "lg" }

Props

NameTypeDefault
size?"default" | "sm" | "lg""default"
<Avatar />

AvatarBadge

constSource L65

Public const export from Avatar.

const AvatarBadge = React.forwardRef<React.ComponentRef<"span">, React.ComponentProps<"span">>(…)
Props type
React.ComponentProps<"span">
<AvatarBadge />

AvatarFallback

constSource L47

Public const export from Avatar.

const AvatarFallback = React.forwardRef<React.ComponentRef<typeof AvatarPrimitive.Fallback>, AvatarPrimitive.Fallback.Props>(…)
Props type
AvatarPrimitive.Fallback.Props
<AvatarFallback />

AvatarGroup

constSource L86

Public const export from Avatar.

const AvatarGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<AvatarGroup />

AvatarGroupCount

constSource L104

Public const export from Avatar.

const AvatarGroupCount = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<AvatarGroupCount />

AvatarImage

constSource L29

Public const export from Avatar.

const AvatarImage = React.forwardRef<React.ComponentRef<typeof AvatarPrimitive.Image>, AvatarPrimitive.Image.Props>(…)
Props type
AvatarPrimitive.Image.Props
<AvatarImage />

Registry dependencies

utils

Package dependencies

@base-ui/react@^1.7.0

Files

  • components/ui/avatar.tsx

Source