Avatar

import * as Avatar from '@components/caprice-ui/avatar';

export default function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-4">
      <Avatar.Root>
        <Avatar.Image
          alt="@Adrian"
          src="https://api.dicebear.com/9.x/open-peeps/svg?seed=Adrian&backgroundColor=b6e3f4"
        />
        <Avatar.Fallback>AD</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root className="rounded-lg">
        <Avatar.Image
          alt="@Katherine"
          src="https://api.dicebear.com/9.x/open-peeps/svg?seed=Katherine&backgroundColor=ffdfbf"
        />
        <Avatar.Fallback>ER</Avatar.Fallback>
      </Avatar.Root>
      <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
        <Avatar.Root>
          <Avatar.Image
            alt="@Jessica"
            src="https://api.dicebear.com/9.x/open-peeps/svg?seed=Jessica&backgroundColor=ffd5dc"
          />
          <Avatar.Fallback>CN</Avatar.Fallback>
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image
            alt="@Kingston"
            src="https://api.dicebear.com/9.x/open-peeps/svg?seed=Kingston&backgroundColor=d1d4f9"
          />
          <Avatar.Fallback>LR</Avatar.Fallback>
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image
            alt="@Maria"
            src="https://api.dicebear.com/9.x/open-peeps/svg?seed=Maria&backgroundColor=c0aede"
          />
          <Avatar.Fallback>ER</Avatar.Fallback>
        </Avatar.Root>
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add @caprice/avatar

npx shadcn@latest add @caprice/avatar

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

import { defineConfig, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const {
  compose,
  cva,
  cx: cn,
} = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

Copy and paste the following code into your project.

'use client';

import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
import type * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * Displays a user's profile picture, initials, or fallback icon.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar)
 *
 * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#root)
 */
export namespace Root {
  export type State = AvatarPrimitive.Root.State;
  export type Props = React.ComponentProps<typeof AvatarPrimitive.Root>;
}

export function Root({ className, ...props }: Root.Props) {
  return (
    <AvatarPrimitive.Root
      className={cn(
        'relative inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-sm',
        className
      )}
      data-slot="avatar"
      {...props}
    />
  );
}

/**
 * The image to be displayed in the avatar.
 * Renders an `<img>` element.
 *
 * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar)
 *
 * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#image)
 */
export namespace Image {
  export type Props = React.ComponentProps<typeof AvatarPrimitive.Image>;
}

export function Image({ className, ...props }: Image.Props) {
  return (
    <AvatarPrimitive.Image
      className={cn('size-full object-cover', className)}
      data-slot="avatar-image"
      {...props}
    />
  );
}

/**
 * Rendered when the image fails to load or when no image is provided.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar)
 *
 * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#fallback)
 */
export namespace Fallback {
  export type Props = React.ComponentProps<typeof AvatarPrimitive.Fallback>;
}

export function Fallback({ className, delay = 2000, ...props }: Fallback.Props) {
  return (
    <AvatarPrimitive.Fallback
      className={cn('flex size-full items-center justify-center rounded-full bg-muted', className)}
      data-slot="avatar-fallback"
      delay={delay}
      {...props}
    />
  );
}

'use client';import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Displays a user's profile picture, initials, or fallback icon. * Renders a `<span>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#root) */export namespace Root {  export type State = AvatarPrimitive.Root.State;  export type Props = React.ComponentProps<typeof AvatarPrimitive.Root>;}export function Root({ className, ...props }: Root.Props) {  return (    <AvatarPrimitive.Root      className={cn(        'relative inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-sm',        className      )}      data-slot="avatar"      {...props}    />  );}/** * The image to be displayed in the avatar. * Renders an `<img>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#image) */export namespace Image {  export type Props = React.ComponentProps<typeof AvatarPrimitive.Image>;}export function Image({ className, ...props }: Image.Props) {  return (    <AvatarPrimitive.Image      className={cn('size-full object-cover', className)}      data-slot="avatar-image"      {...props}    />  );}/** * Rendered when the image fails to load or when no image is provided. * Renders a `<span>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#fallback) */export namespace Fallback {  export type Props = React.ComponentProps<typeof AvatarPrimitive.Fallback>;}export function Fallback({ className, delay = 2000, ...props }: Fallback.Props) {  return (    <AvatarPrimitive.Fallback      className={cn('flex size-full items-center justify-center rounded-full bg-muted', className)}      data-slot="avatar-fallback"      delay={delay}      {...props}    />  );}

Update the import paths to match your project setup.

Usage

import * as Avatar from "@/components/caprice-ui/avatar"

import * as Avatar from "@/components/caprice-ui/avatar"

import * as Avatar from "@caprice-ui/react/avatar"

import * as Avatar from "@caprice-ui/react/avatar"

<Avatar.Root>
  <Avatar.Image src="https://github.com/fabrelea.png" />
  <Avatar.Fallback>FL</Avatar.Fallback>
</Avatar.Root>

'use client'; import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'; import type * as React from 'react'; import { cn } from '@/lib/utils'; /** * Displays a user's profile picture, initials, or fallback icon. * Renders a `<span>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#root) */ export namespace Root { export type State = AvatarPrimitive.Root.State; export type Props = React.ComponentProps<typeof AvatarPrimitive.Root>; } export function Root({ className, ...props }: Root.Props) { return ( <AvatarPrimitive.Root className={cn( 'relative inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-sm', className )} data-slot="avatar" {...props} /> ); } /** * The image to be displayed in the avatar. * Renders an `<img>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#image) */ export namespace Image { export type Props = React.ComponentProps<typeof AvatarPrimitive.Image>; } export function Image({ className, ...props }: Image.Props) { return ( <AvatarPrimitive.Image className={cn('size-full object-cover', className)} data-slot="avatar-image" {...props} /> ); } /** * Rendered when the image fails to load or when no image is provided. * Renders a `<span>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#fallback) */ export namespace Fallback { export type Props = React.ComponentProps<typeof AvatarPrimitive.Fallback>; } export function Fallback({ className, delay = 2000, ...props }: Fallback.Props) { return ( <AvatarPrimitive.Fallback className={cn('flex size-full items-center justify-center rounded-full bg-muted', className)} data-slot="avatar-fallback" delay={delay} {...props} /> ); }