big milestone!

src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </div>
+</template> 

src/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex h-full w-full items-center justify-center rounded-full bg-muted', props.class)"
+  >
+    <slot />
+  </div>
+</template> 

src/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  src?: string
+  alt?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <img
+    :src="src"
+    :alt="alt"
+    :class="cn('aspect-square h-full w-full', props.class)"
+  />
+</template> 

src/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'