Ark Preset Docs

Avatar

An image element with a fallback for representing users or entities.

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

export default function AvatarBasicDemo() {
  return (
    <Avatar>
      <AvatarFallback>JD</AvatarFallback>
      <AvatarImage src="https://i.pravatar.cc/150?u=john" alt="John Doe" />
    </Avatar>
  );
}

Installation

CLI

Run the following command to add the component to your project:

npx @ark-preset/cli@latest add avatar

Manual

Create the recipe file at src/components/recipes/avatar.ts:

import { tv, type VariantProps } from "tailwind-variants";

export const avatarVariants = tv({
  slots: {
    root: "relative flex shrink-0 overflow-hidden rounded-full size-10",
    fallback:
      "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium",
    image: "aspect-square size-full object-cover",
  },
});

export type AvatarVariants = VariantProps<typeof avatarVariants>;

Create the component directory and files.

src/components/avatar/avatar.base.tsx:

import { Avatar as ArkAvatar } from "@ark-ui/solid/avatar";
import { splitProps, type Component } from "solid-js";
import { avatarVariants } from "../recipes/avatar";

const styles = avatarVariants();

const Root: Component<ArkAvatar.RootProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ArkAvatar.Root class={styles.root({ class: local.class })} {...others} />;
};

const RootProvider: Component<ArkAvatar.RootProviderProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ArkAvatar.RootProvider class={styles.root({ class: local.class })} {...others} />;
};

const Fallback: Component<ArkAvatar.FallbackProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ArkAvatar.Fallback class={styles.fallback({ class: local.class })} {...others} />;
};

const Image: Component<ArkAvatar.ImageProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ArkAvatar.Image class={styles.image({ class: local.class })} {...others} />;
};

export const Avatar = { Root, RootProvider, Fallback, Image };

src/components/avatar/index.tsx:

import { Avatar as AvatarBase } from "./avatar.base";

const Avatar = AvatarBase.Root;
const AvatarFallback = AvatarBase.Fallback;
const AvatarImage = AvatarBase.Image;

export { Avatar, AvatarFallback, AvatarImage, AvatarBase };

export { avatarVariants, type AvatarVariants } from "../recipes/avatar";

Note: Make sure your project has the Tailwind CSS theme variables set up (--background, --foreground, --ring, --border, etc.) or override the utility classes to match your design system.

Usage

Basic Usage

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

export default function AvatarBasicDemo() {
  return (
    <Avatar>
      <AvatarFallback>JD</AvatarFallback>
      <AvatarImage src="https://i.pravatar.cc/150?u=john" alt="John Doe" />
    </Avatar>
  );
}

With Fallback Only

When no image is provided or the image fails to load, the fallback is shown:

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

export default function AvatarFallbackDemo() {
  return (
    <Avatar>
      <AvatarFallback>AB</AvatarFallback>
    </Avatar>
  );
}

API Reference

See the Ark UI Avatar documentation.