Avatar

1import { Avatar, AvatarImage, AvatarFallback, AvatarBadge } from "@/components/ui/avatar";
2
3<Avatar />

1"use client";
2
3import { Avatar as ArkAvatar, useAvatarContext } from "@ark-ui/react/avatar";
4import { ark } from "@ark-ui/react/factory";
5import type React from "react";
6import { tv, type VariantProps } from "tailwind-variants";
7import { cn } from "@/lib/utils";
8import {
9  Status,
10  type statusVariants,
11} from "@/registry/react/components/status";
12
13export const useAvatar = useAvatarContext;
14
15const avatarVariants = tv({
16  base: [
17    "group/avatar",
18    "relative",
19    "size-8",
20    "inline-flex shrink-0 items-center justify-center",
21    "bg-background",
22    "select-none font-medium text-xs",
23    "rounded-full",
24    "after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
25  ],
26  variants: {
27    size: {
28      sm: "size-6",