Candor UI

Avatar

Pro

shadcn's avatar in Candor's theme.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/avatar

Brings in: utils · npm: radix-ui@^1.8.1

Usage

TSX · The example above
"use client"

import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <Avatar size="lg">
        <AvatarFallback>PR</AvatarFallback>
        <AvatarBadge>
          <span className="sr-only">Online</span>
        </AvatarBadge>
      </Avatar>
      <AvatarGroup role="group" aria-label="Reviewers: Priya, Dana, Jonas and 2 more">
        <Avatar>
          <AvatarFallback>P</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>D</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>J</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>+2</AvatarGroupCount>
      </AvatarGroup>
    </div>
  )
}

<Avatar>

PropTypeDefaultDescription
size"default" | "sm" | "lg" | undefined"default"32px by default; sm is 24px, lg 40px.

Also takes the props of React.ComponentProps<typeof AvatarPrimitive.Root>.

<AvatarImage>

No props.

Also takes the props of React.ComponentProps<typeof AvatarPrimitive.Image>.

<AvatarFallback>

No props.

Also takes the props of React.ComponentProps<typeof AvatarPrimitive.Fallback>.

<AvatarBadge>

No props.

Also takes the props of React.ComponentProps<"span">.

<AvatarGroup>

No props.

Also takes the props of React.ComponentProps<"div">.

<AvatarGroupCount>

No props.

Also takes the props of React.ComponentProps<"div">.