diff --git a/.changeset/eight-mirrors-bake.md b/.changeset/eight-mirrors-bake.md
new file mode 100644
index 0000000..c7d4b18
--- /dev/null
+++ b/.changeset/eight-mirrors-bake.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add loading skeleton
diff --git a/src/components/Skeleton/Skeleton.stories.tsx b/src/components/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 0000000..e7f9376
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/react";
+import { Skeleton } from "./index";
+import { StoryObj } from "@storybook/react";
+import React from "react";
+
+const meta = {
+	title: "Elements/Skeleton",
+	component: Skeleton,
+
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-[400px] h-[200px]">
+				<Story />
+			</div>
+		)
+	],
+	tags: ["autodocs"]
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		className: "h-full"
+	}
+};
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
new file mode 100644
index 0000000..601c2a1
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -0,0 +1,8 @@
+import { cn } from "../../utilities";
+import React from "react";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return <div className={cn("animate-pulse rounded-md bg-neutral-200", className)} {...props} />;
+}
+
+export { Skeleton };
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
new file mode 100644
index 0000000..55879b8
--- /dev/null
+++ b/src/components/Skeleton/index.tsx
@@ -0,0 +1 @@
+export * from "./Skeleton";
diff --git a/src/components/index.ts b/src/components/index.ts
index af93a24..9739780 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,3 +3,4 @@ export * from "./Input";
 export * from "./Sidebar";
 export * from "./Box";
 export * from "./Avatar";
+export * from "./Skeleton";
diff --git a/test/utilities/index.test.ts b/test/utilities/index.test.ts
index 28363bd..bb40fd8 100644
--- a/test/utilities/index.test.ts
+++ b/test/utilities/index.test.ts
@@ -17,4 +17,8 @@ describe("cn", () => {
 	test("should replace undefined classes", () => {
 		expect(cn("text-white", undefined)).toBe("text-white");
 	});
+
+	test("custom font sizes", () => {
+		expect(cn("text-text-md", "text-display-xs")).toBe("text-display-xs");
+	});
 });