diff --git a/apps/www/src/content/docs/docs/components/avatar.mdx b/apps/www/src/content/docs/docs/components/avatar.mdx
new file mode 100644
index 0000000..6989ea1
--- /dev/null
+++ b/apps/www/src/content/docs/docs/components/avatar.mdx
@@ -0,0 +1,48 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+links:
+ doc: https://www.radix-ng.com/?path=/docs/primitives-avatar--docs
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+
+
+
+## Installation
+
+
+
+ ```bash frame="code"
+ npx shadcn-ng@latest add avatar
+ ```
+
+
+
+
+ 1. Copy and paste the following code into your project.
+
+
+ 2. Update the import paths to match your project setup.
+
+
+
+
+
+## Usage
+
+```ts
+import {
+ UbAvatarDirective,
+ UbAvatarImageDirective,
+ UbAvatarFallbackDirective
+} from '@/components/ui/avatar.directive'
+```
+
+```angular-html
+
+
+ UB
+
+```
diff --git a/apps/www/src/registry/default/example/avatar-demo.ts b/apps/www/src/registry/default/example/avatar-demo.ts
new file mode 100644
index 0000000..e623ed7
--- /dev/null
+++ b/apps/www/src/registry/default/example/avatar-demo.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective } from '@/registry/default/ui/avatar.directive'
+
+@Component({
+ standalone: true,
+ selector: 'avatar-demo-default',
+ imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
+ template: `
+
+
+ UB
+
+ `
+})
+export class AvatarDemoDefault { }
+
+export default AvatarDemoDefault;
diff --git a/apps/www/src/registry/default/ui/avatar.directive.ts b/apps/www/src/registry/default/ui/avatar.directive.ts
new file mode 100644
index 0000000..0595427
--- /dev/null
+++ b/apps/www/src/registry/default/ui/avatar.directive.ts
@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+import { computed, Directive, input } from '@angular/core';
+
+import { RdxAvatarRootDirective, RdxAvatarImageDirective, RdxAvatarFallbackDirective } from '@radix-ng/primitives/avatar'
+
+@Directive({
+ standalone: true,
+ selector: 'span[ubAvatar]',
+ hostDirectives: [RdxAvatarRootDirective],
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class UbAvatarDirective {
+ readonly class = input();
+
+ readonly computedClass = computed(() => {
+ return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class());
+ })
+}
+
+@Directive({
+ standalone: true,
+ selector: 'img[ubAvatarImage]',
+ hostDirectives: [RdxAvatarImageDirective],
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class UbAvatarImageDirective {
+ readonly class = input();
+
+ readonly computedClass = computed(() => {
+ return cn('aspect-square h-full w-full', this.class());
+ })
+}
+
+@Directive({
+ standalone: true,
+ selector: 'span[ubAvatarFallback]',
+ hostDirectives: [RdxAvatarFallbackDirective],
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class UbAvatarFallbackDirective {
+ readonly class = input();
+
+ readonly computedClass = computed(() => {
+ return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class());
+ })
+}
diff --git a/apps/www/src/registry/new-york/example/avatar-demo.ts b/apps/www/src/registry/new-york/example/avatar-demo.ts
new file mode 100644
index 0000000..44d1288
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/avatar-demo.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective } from '@/registry/new-york/ui/avatar.directive'
+
+@Component({
+ standalone: true,
+ selector: 'avatar-demo-new-york',
+ imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
+ template: `
+
+
+ UB
+
+ `
+})
+export class AvatarDemoNewYork { }
+
+export default AvatarDemoNewYork;
diff --git a/apps/www/src/registry/new-york/ui/avatar.directive.ts b/apps/www/src/registry/new-york/ui/avatar.directive.ts
new file mode 100644
index 0000000..0595427
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/avatar.directive.ts
@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+import { computed, Directive, input } from '@angular/core';
+
+import { RdxAvatarRootDirective, RdxAvatarImageDirective, RdxAvatarFallbackDirective } from '@radix-ng/primitives/avatar'
+
+@Directive({
+ standalone: true,
+ selector: 'span[ubAvatar]',
+ hostDirectives: [RdxAvatarRootDirective],
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class UbAvatarDirective {
+ readonly class = input();
+
+ readonly computedClass = computed(() => {
+ return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class());
+ })
+}
+
+@Directive({
+ standalone: true,
+ selector: 'img[ubAvatarImage]',
+ hostDirectives: [RdxAvatarImageDirective],
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class UbAvatarImageDirective {
+ readonly class = input();
+
+ readonly computedClass = computed(() => {
+ return cn('aspect-square h-full w-full', this.class());
+ })
+}
+
+@Directive({
+ standalone: true,
+ selector: 'span[ubAvatarFallback]',
+ hostDirectives: [RdxAvatarFallbackDirective],
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class UbAvatarFallbackDirective {
+ readonly class = input();
+
+ readonly computedClass = computed(() => {
+ return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class());
+ })
+}
diff --git a/apps/www/src/registry/ui.ts b/apps/www/src/registry/ui.ts
index 52f42c1..37563f5 100644
--- a/apps/www/src/registry/ui.ts
+++ b/apps/www/src/registry/ui.ts
@@ -12,6 +12,12 @@ export const ui: Registry = [
type: "components:ui",
files: ["ui/alert.directive.ts"],
},
+ {
+ name: "avatar",
+ type: "components:ui",
+ dependencies: ["@radix-ng/primitives"],
+ files: ["ui/avatar.directive.ts"],
+ },
{
name: "badge",
type: "components:ui",