diff --git a/src/components/Skeleton/index.css.ts b/src/components/Skeleton/index.css.ts
new file mode 100644
index 000000000..99acbb31b
--- /dev/null
+++ b/src/components/Skeleton/index.css.ts
@@ -0,0 +1,13 @@
+import { slateDarkA } from '@radix-ui/colors';
+import { keyframes, style } from '@vanilla-extract/css';
+
+const animation = keyframes({
+  '0%': { backgroundColor: slateDarkA.slateA2 },
+  '50%': { backgroundColor: slateDarkA.slateA3 },
+  '100%': { backgroundColor: slateDarkA.slateA2 },
+});
+
+export const skeleton = style({
+  borderRadius: 8,
+  animation: `${animation} 2s ease-in-out infinite`,
+});
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
new file mode 100644
index 000000000..ca110b831
--- /dev/null
+++ b/src/components/Skeleton/index.tsx
@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { skeleton } from './index.css';
+
+export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
+  return <div {...props} className={`${className} ${skeleton}`} />;
+}