diff --git a/.changeset/popular-pianos-kneel.md b/.changeset/popular-pianos-kneel.md
new file mode 100644
index 0000000..0e3fb4f
--- /dev/null
+++ b/.changeset/popular-pianos-kneel.md
@@ -0,0 +1,5 @@
+---
+"@cloudmix-dev/react": patch
+---
+
+Add Skeleton for Avatar component
diff --git a/packages/react/src/components/avatar.tsx b/packages/react/src/components/avatar.tsx
index d30db45..0dd067c 100644
--- a/packages/react/src/components/avatar.tsx
+++ b/packages/react/src/components/avatar.tsx
@@ -74,4 +74,21 @@ Avatar.Group = function AvatarGroup({ children, className }: AvatarGroupProps) {
 // @ts-expect-error
 Avatar.Group.displayName = "Avatar.Group";
 
+export interface AvatarSkeletonProps
+  extends VariantProps<typeof avatarVariants> {
+  className?: string;
+}
+
+Avatar.Skeleton = function AvatarSkeleton({
+  className,
+  size,
+}: AvatarSkeletonProps) {
+  return (
+    <div className={cn("animate-pulse", avatarVariants({ size, className }))} />
+  );
+};
+
+// @ts-expect-error
+Avatar.Skeleton.displayName = "Avatar.Skeleton";
+
 export { Avatar };
diff --git a/www/storybook/src/stories/avatar.stories.tsx b/www/storybook/src/stories/avatar.stories.tsx
index 889f84a..7a7afeb 100644
--- a/www/storybook/src/stories/avatar.stories.tsx
+++ b/www/storybook/src/stories/avatar.stories.tsx
@@ -86,3 +86,12 @@ export const Group: AvatarGroupStory = {
     </Avatar.Group>
   ),
 };
+
+type SkeletonStory = StoryObj<typeof Avatar.Skeleton>;
+
+export const Skeleton: SkeletonStory = {
+  render: (props) => <Avatar.Skeleton {...props} />,
+  args: {
+    size: "default",
+  },
+};