diff --git a/components/blog/PostList.tsx b/components/blog/PostList.tsx
new file mode 100644
index 0000000..f584aed
--- /dev/null
+++ b/components/blog/PostList.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { motion } from "motion/react";
+import { PostCard } from "./PostCard";
+import type { PostMeta } from "@/lib/posts";
+
+const listVariants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.07,
+      delayChildren: 0.15,
+    },
+  },
+};
+
+interface PostListProps {
+  posts: PostMeta[];
+}
+
+export function PostList({ posts }: PostListProps) {
+  return (
+    <motion.ul variants={listVariants} initial="hidden" animate="visible" className="space-y-8">
+      {posts.map((post) => (
+        <li key={post.slug}>
+          <PostCard {...post} index={posts.indexOf(post)} />
+        </li>
+      ))}
+    </motion.ul>
+  );
+}