ui Architecture Docs
Home / File/ avatar.tsx — ui Source File

avatar.tsx — ui Source File

Architecture documentation for avatar.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 3 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  a569ba89_14b5_b23e_2c1c_20d0ed4dea93["avatar.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  a569ba89_14b5_b23e_2c1c_20d0ed4dea93 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  3dd0fb23_6ed8_09c2_7f89_36a96a2e1ce9["avatar"]
  a569ba89_14b5_b23e_2c1c_20d0ed4dea93 --> 3dd0fb23_6ed8_09c2_7f89_36a96a2e1ce9
  8ad666ec_1b20_adda_0392_87a60bdb3a68["utils"]
  a569ba89_14b5_b23e_2c1c_20d0ed4dea93 --> 8ad666ec_1b20_adda_0392_87a60bdb3a68
  style a569ba89_14b5_b23e_2c1c_20d0ed4dea93 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"

import { cn } from "@/registry/bases/base/lib/utils"

function Avatar({
  className,
  size = "default",
  ...props
}: AvatarPrimitive.Root.Props & {
  size?: "default" | "sm" | "lg"
}) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      data-size={size}
      className={cn(
        "cn-avatar after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
        className
      )}
      {...props}
    />
  )
}

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

function AvatarFallback({
  className,
  ...props
}: AvatarPrimitive.Fallback.Props) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "cn-avatar-fallback flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
        className
      )}
      {...props}
    />
  )
}

function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="avatar-badge"
      className={cn(
        "cn-avatar-badge absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group"
      className={cn(
        "cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      className={cn(
        "cn-avatar-group-count ring-background relative flex shrink-0 items-center justify-center ring-2",
        "",
        className
      )}
      {...props}
    />
  )
}

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarBadge,
}

Domain

Subdomains

Functions

Dependencies

  • avatar
  • react
  • utils

Source

Frequently Asked Questions

What does avatar.tsx do?
avatar.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in avatar.tsx?
avatar.tsx defines 6 function(s): Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage.
What does avatar.tsx depend on?
avatar.tsx imports 3 module(s): avatar, react, utils.
Where is avatar.tsx in the architecture?
avatar.tsx is located at apps/v4/registry/bases/base/ui/avatar.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/ui).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free