Avatar

An image element with a fallback for representing the user.

CNER

CNLRER

import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div class="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar class="rounded-lg">
        <AvatarImage alt="@evilrabbit" src="https://github.com/evilrabbit.png" />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div class="-space-x-2 flex *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage alt="@maxleiter" src="https://github.com/maxleiter.png" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage alt="@evilrabbit" src="https://github.com/evilrabbit.png" />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

Installation

npx solidui-cli@latest add avatar

pnpx solidui-cli@latest add avatar

yarn dlx solidui-cli@latest add avatar

bunx --bun solidui-cli@latest add avatar

dpx solidui-cli@latest add avatar

Install the following dependencies:

npm install @kobalte/core

pnpm add @kobalte/core

yarn add @kobalte/core

bun add @kobalte/core

deno add npm:@kobalte/core

Copy and paste the following code into your project.

components/ui/avatar.tsx

import type { ValidComponent } from "solid-js"
import { splitProps } from "solid-js"

import * as ImagePrimitive from "@kobalte/core/image"
import type { PolymorphicProps } from "@kobalte/core/polymorphic"

import { cn } from "~/lib/utils"

type AvatarRootProps<T extends ValidComponent = "span"> = ImagePrimitive.ImageRootProps<T> & {
  class?: string | undefined
}

const Avatar = <T extends ValidComponent = "span">(
  props: PolymorphicProps<T, AvatarRootProps<T>>
) => {
  const [local, others] = splitProps(props as AvatarRootProps, ["class"])
  return (
    <ImagePrimitive.Root
      class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", local.class)}
      data-slot="avatar"
      {...others}
    />
  )
}

type AvatarImageProps<T extends ValidComponent = "img"> = ImagePrimitive.ImageImgProps<T> & {
  class?: string | undefined
}

const AvatarImage = <T extends ValidComponent = "img">(
  props: PolymorphicProps<T, AvatarImageProps<T>>
) => {
  const [local, others] = splitProps(props as AvatarImageProps, ["class"])
  return (
    <ImagePrimitive.Img
      class={cn("aspect-square size-full", local.class)}
      data-slot="avatar-image"
      {...others}
    />
  )
}

type AvatarFallbackProps<T extends ValidComponent = "span"> =
  ImagePrimitive.ImageFallbackProps<T> & { class?: string | undefined }

const AvatarFallback = <T extends ValidComponent = "span">(
  props: PolymorphicProps<T, AvatarFallbackProps<T>>
) => {
  const [local, others] = splitProps(props as AvatarFallbackProps, ["class"])
  return (
    <ImagePrimitive.Fallback
      class={cn("flex size-full items-center justify-center rounded-full bg-muted", local.class)}
      data-slot="avatar-fallback"
      {...others}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }

Update the import paths to match your project setup.

Usage

import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";

1
<Avatar>
2
  <AvatarImage src="https://github.com/shadcn.png" />
3
  <AvatarFallback>CN</AvatarFallback>
4
</Avatar>

Aspect Ratio Badge