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

avatar-demo.tsx — ui Source File

Architecture documentation for avatar-demo.tsx, a tsx file in the ui codebase. 2 imports, 1 dependents.

File tsx DocumentationAtlas Changelog 2 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  22dce6e5_d53c_1f91_dd32_7858da532d85["avatar-demo.tsx"]
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  22dce6e5_d53c_1f91_dd32_7858da532d85 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  550576ca_32fe_8288_72d6_10281189833b["avatar"]
  22dce6e5_d53c_1f91_dd32_7858da532d85 --> 550576ca_32fe_8288_72d6_10281189833b
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> 22dce6e5_d53c_1f91_dd32_7858da532d85
  style 22dce6e5_d53c_1f91_dd32_7858da532d85 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { PlusIcon } from "lucide-react"

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/registry/new-york-v4/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-col gap-6">
      {/* Sizes. */}
      <div className="flex flex-row flex-wrap items-center gap-4">
        <Avatar size="sm">
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar size="lg">
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
      </div>
      {/* Fallback. */}
      <div className="flex flex-row flex-wrap items-center gap-4">
        <Avatar size="sm">
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar size="lg">
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
      </div>
      {/* With badge. */}
      <div className="flex flex-row flex-wrap items-center gap-4">
        <Avatar size="sm">
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
          <AvatarBadge />
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
          <AvatarBadge />
        </Avatar>
        <Avatar size="lg">
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
          <AvatarBadge>
            <PlusIcon />
          </AvatarBadge>
        </Avatar>
// ... (115 more lines)

Domain

Subdomains

Functions

Dependencies

  • avatar
  • lucide-react

Imported By

Source

Frequently Asked Questions

What does avatar-demo.tsx do?
avatar-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in avatar-demo.tsx?
avatar-demo.tsx defines 1 function(s): AvatarDemo.
What does avatar-demo.tsx depend on?
avatar-demo.tsx imports 2 module(s): avatar, lucide-react.
What files import avatar-demo.tsx?
avatar-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is avatar-demo.tsx in the architecture?
avatar-demo.tsx is located at apps/v4/app/(internal)/sink/components/avatar-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

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

Try Supermodel Free