Avatar

An image element with a fallback for representing the user.

Preview

DN

Code

import Avatar from '@dinui/react/avatar'

export default function AvatarVariantDemo() {
  return (
    <Avatar>
      <Avatar.Image src="https://github.com/dinwwwh.png" alt="@dinwwwh" />
      <Avatar.Fallback>DN</Avatar.Fallback>
    </Avatar>
  )
}

Size

Preview

DNDNDN

Code

import Avatar from '@dinui/react/avatar'

export default function AvatarVariantDemo() {
  return (
    <div className="flex flex-wrap gap-6 items-center">
      <Avatar size="sm">
        <Avatar.Image src="https://github.com/dinwwwh.png" alt="@dinwwwh" />
        <Avatar.Fallback>DN</Avatar.Fallback>
      </Avatar>

      <Avatar size="md">
        <Avatar.Image src="https://github.com/dinwwwh.png" alt="@dinwwwh" />
        <Avatar.Fallback>DN</Avatar.Fallback>
      </Avatar>

      <Avatar size="lg">
        <Avatar.Image src="https://github.com/dinwwwh.png" alt="@dinwwwh" />
        <Avatar.Fallback>DN</Avatar.Fallback>
      </Avatar>
    </div>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add avatar

   yarn

   yarn dlx @dinui/cli@latest add avatar

   pnpm

   pnpm dlx @dinui/cli@latest add avatar

   bun

   bunx @dinui/cli@latest add avatar

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-avatar tailwind-variants tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-avatar tailwind-variants tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-avatar tailwind-variants tailwind-variants type-fest

   bun

   bun add @radix-ui/react-avatar tailwind-variants tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import * as AvatarPrimitive from '@radix-ui/react-avatar'
   import { createContext, forwardRef, useContext } from 'react'
   import type { VariantProps } from 'tailwind-variants'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const avatar = tv({
     slots: {
       root: 'relative flex shrink-0 overflow-hidden rounded-full',
       image: 'object-cover object-center h-full w-full',
       fallback: 'flex h-full w-full items-center justify-center rounded-full bg-bg--active',
     },
     variants: {
       size: {
         sm: {
           root: 'size-8',
         },
         md: {
           root: 'size-9',
         },
         lg: {
           root: 'size-10',
         },
       },
     },
     defaultVariants: {
       size: 'md',
     },
   })
   
   type AvatarVariantProps = VariantProps<typeof avatar>
   
   const AvatarContext = createContext<AvatarVariantProps>(avatar.defaultVariants)
   
   const AvatarRoot = forwardRef<
     React.ElementRef<typeof AvatarPrimitive.Root>,
     Merge<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, AvatarVariantProps>
   >(({ size, ...props }, ref) => {
     const variantProps = { size }
     const { root } = avatar(variantProps)
   
     return (
       <AvatarContext.Provider value={variantProps}>
         <AvatarPrimitive.Root {...props} ref={ref} className={root({ className: props.className })} />
       </AvatarContext.Provider>
     )
   })
   AvatarRoot.displayName = AvatarPrimitive.Root.displayName
   
   const AvatarImage = forwardRef<
     React.ElementRef<typeof AvatarPrimitive.Image>,
     React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
   >((props, ref) => {
     const variantProps = useContext(AvatarContext)
     const { image } = avatar(variantProps)
   
     return (
       <AvatarPrimitive.Image {...props} ref={ref} className={image({ className: props.className })} />
     )
   })
   AvatarImage.displayName = AvatarPrimitive.Image.displayName
   
   const AvatarFallback = forwardRef<
     React.ElementRef<typeof AvatarPrimitive.Fallback>,
     React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
   >((props, ref) => {
     const variantProps = useContext(AvatarContext)
     const { fallback } = avatar(variantProps)
   
     return (
       <AvatarPrimitive.Fallback
         {...props}
         ref={ref}
         className={fallback({ className: props.className })}
       />
     )
   })
   AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
   
   const Avatar = Object.assign(AvatarRoot, {
     Image: AvatarImage,
     Fallback: AvatarFallback,
   })
   
   export default Avatar
   export { avatar, AvatarPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.