diff --git a/apps/docs/content/docs/index.mdx b/apps/docs/content/docs/index.mdx
index 88c2338..cad7ef8 100644
--- a/apps/docs/content/docs/index.mdx
+++ b/apps/docs/content/docs/index.mdx
@@ -3,12 +3,10 @@ title: Welcome!
 description: changelog made smarter, faster, and user-focused.
 ---
 
-Looking to setup our widget?
+## Getting Started
 
-<Card title="Setup Widget" href="/docs/widget" />
-
-## Want to deep dive?
-
-Dive a little deeper and start exploring our API reference to get an idea of everything that's possible with the API:
-
-<Card title="API Reference" href="/docs/api/page" />
+<Cards>
+  <Card title="Setup Widget" href="/docs/widget" />
+  <Card title="SDKs" href="/docs/sdk" />
+  <Card title="API Reference" href="/docs/api/page" />
+</Cards>
diff --git a/apps/docs/content/docs/sdk/core.mdx b/apps/docs/content/docs/sdk/core.mdx
new file mode 100644
index 0000000..18dac46
--- /dev/null
+++ b/apps/docs/content/docs/sdk/core.mdx
@@ -0,0 +1,61 @@
+---
+title: Core SDK
+description: Framework-agnostic JavaScript SDK for fetching changelog data.
+---
+
+## Installation
+
+```bash
+npm install @changespage/core
+```
+
+## Usage
+
+```typescript
+import { createChangesPageClient } from "@changespage/core";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+const { posts, totalCount, hasMore } = await client.getPosts({ limit: 10 });
+
+const latestPost = await client.getLatestPost();
+
+const pinnedPost = await client.getPinnedPost();
+```
+
+## API
+
+### `createChangesPageClient(config)`
+
+Creates a client instance.
+
+| Option    | Type     | Description              |
+| --------- | -------- | ------------------------ |
+| `baseUrl` | `string` | Your changes.page URL    |
+
+### Client Methods
+
+#### `getPosts(options?)`
+
+Fetches paginated posts.
+
+| Option   | Type     | Default | Description                |
+| -------- | -------- | ------- | -------------------------- |
+| `limit`  | `number` | 10      | Number of posts (max: 50)  |
+| `offset` | `number` | 0       | Pagination offset          |
+
+Returns `{ posts, totalCount, hasMore }`.
+
+#### `getLatestPost()`
+
+Returns the most recent post or `null`.
+
+#### `getPinnedPost()`
+
+Returns the pinned post or `null`.
+
+### `getTagLabel(tag)`
+
+Converts a tag to display label (e.g., `"fix"` → `"Fix"`).
diff --git a/apps/docs/content/docs/sdk/index.mdx b/apps/docs/content/docs/sdk/index.mdx
new file mode 100644
index 0000000..7ffe16f
--- /dev/null
+++ b/apps/docs/content/docs/sdk/index.mdx
@@ -0,0 +1,18 @@
+---
+title: SDKs
+description: JavaScript and React SDKs for integrating changelogs into your application.
+---
+
+We provide official SDKs to help you integrate changelogs directly into your application.
+
+<Cards>
+  <Card title="Core SDK" href="/docs/sdk/core" />
+  <Card title="React SDK" href="/docs/sdk/react" />
+</Cards>
+
+## Next.js Examples
+
+<Cards>
+  <Card title="App Router" href="/docs/sdk/nextjs-app-router" />
+  <Card title="Pages Router" href="/docs/sdk/nextjs-pages-router" />
+</Cards>
diff --git a/apps/docs/content/docs/sdk/nextjs-app-router.mdx b/apps/docs/content/docs/sdk/nextjs-app-router.mdx
new file mode 100644
index 0000000..bb76825
--- /dev/null
+++ b/apps/docs/content/docs/sdk/nextjs-app-router.mdx
@@ -0,0 +1,174 @@
+---
+title: Next.js App Router
+description: Using the React SDK with Next.js App Router.
+---
+
+## Installation
+
+```bash
+npm install @changespage/react react-markdown
+```
+
+## Server Component with Client Hydration
+
+```tsx title="app/changelog/page.tsx"
+import { createChangesPageClient } from "@changespage/react";
+import { ChangelogList } from "./changelog-list";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+export default async function ChangelogPage() {
+  const initialData = await client.getPosts({ limit: 10 });
+
+  return <ChangelogList initialData={initialData} />;
+}
+```
+
+```tsx title="app/changelog/changelog-list.tsx"
+"use client";
+
+import { createChangesPageClient, usePosts, getTagLabel } from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+export function ChangelogList({ initialData }: { initialData: Awaited<ReturnType<typeof client.getPosts>> }) {
+  const { posts, hasMore, loading, loadMore } = usePosts({
+    client,
+    initialData,
+  });
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <article key={post.id}>
+          <div>
+            {post.tags.map((tag) => (
+              <span key={tag}>{getTagLabel(tag)}</span>
+            ))}
+          </div>
+          <h2>{post.title}</h2>
+          <Markdown>{post.plain_text_content}</Markdown>
+        </article>
+      ))}
+      {hasMore && (
+        <button type="button" onClick={loadMore} disabled={loading}>
+          {loading ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+## Client-Only
+
+```tsx title="app/changelog/page.tsx"
+"use client";
+
+import { createChangesPageClient, usePosts, getTagLabel } from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+export default function ChangelogPage() {
+  const { posts, hasMore, loading, loadMore } = usePosts({ client });
+
+  if (loading && posts.length === 0) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <article key={post.id}>
+          <div>
+            {post.tags.map((tag) => (
+              <span key={tag}>{getTagLabel(tag)}</span>
+            ))}
+          </div>
+          <h2>{post.title}</h2>
+          <Markdown>{post.plain_text_content}</Markdown>
+        </article>
+      ))}
+      {hasMore && (
+        <button type="button" onClick={loadMore} disabled={loading}>
+          {loading ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+## With Tailwind CSS
+
+```tsx title="app/changelog/page.tsx"
+"use client";
+
+import { createChangesPageClient, usePosts, getTagLabel, type PostTag } from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+const tagColors: Record<PostTag, string> = {
+  new: "bg-green-100 text-green-800",
+  fix: "bg-red-100 text-red-800",
+  improvement: "bg-blue-100 text-blue-800",
+  announcement: "bg-purple-100 text-purple-800",
+  alert: "bg-yellow-100 text-yellow-800",
+};
+
+export default function ChangelogPage() {
+  const { posts, hasMore, loading, loadMore } = usePosts({ client });
+
+  if (loading && posts.length === 0) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-gray-800" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-8 px-4 py-8">
+      {posts.map((post) => (
+        <article key={post.id} className="rounded-lg border border-gray-200 p-6">
+          <div className="mb-3 flex flex-wrap gap-2">
+            {post.tags.map((tag) => (
+              <span
+                key={tag}
+                className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${tagColors[tag]}`}
+              >
+                {getTagLabel(tag)}
+              </span>
+            ))}
+          </div>
+          <h2 className="mb-2 text-xl font-semibold text-gray-900">{post.title}</h2>
+          <div className="prose prose-sm text-gray-600">
+            <Markdown>{post.plain_text_content}</Markdown>
+          </div>
+        </article>
+      ))}
+      {hasMore && (
+        <button
+          type="button"
+          onClick={loadMore}
+          disabled={loading}
+          className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+        >
+          {loading ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
diff --git a/apps/docs/content/docs/sdk/nextjs-pages-router.mdx b/apps/docs/content/docs/sdk/nextjs-pages-router.mdx
new file mode 100644
index 0000000..90fc235
--- /dev/null
+++ b/apps/docs/content/docs/sdk/nextjs-pages-router.mdx
@@ -0,0 +1,233 @@
+---
+title: Next.js Pages Router
+description: Using the React SDK with Next.js Pages Router.
+---
+
+## Installation
+
+```bash
+npm install @changespage/react react-markdown
+```
+
+## With SSR (getServerSideProps)
+
+```tsx title="pages/changelog.tsx"
+import type { InferGetServerSidePropsType } from "next";
+import {
+  createChangesPageClient,
+  usePosts,
+  getTagLabel,
+} from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+export async function getServerSideProps() {
+  const initialData = await client.getPosts({ limit: 10 });
+  return { props: { initialData } };
+}
+
+export default function ChangelogPage({
+  initialData,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { posts, hasMore, loading, loadMore } = usePosts({
+    client,
+    initialData,
+  });
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <article key={post.id}>
+          <div>
+            {post.tags.map((tag) => (
+              <span key={tag}>{getTagLabel(tag)}</span>
+            ))}
+          </div>
+          <h2>{post.title}</h2>
+          <Markdown>{post.plain_text_content}</Markdown>
+        </article>
+      ))}
+      {hasMore && (
+        <button type="button" onClick={loadMore} disabled={loading}>
+          {loading ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+## With SSG (getStaticProps)
+
+```tsx title="pages/changelog.tsx"
+import type { InferGetStaticPropsType } from "next";
+import {
+  createChangesPageClient,
+  usePosts,
+  getTagLabel,
+} from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+export async function getStaticProps() {
+  const initialData = await client.getPosts({ limit: 10 });
+  return {
+    props: { initialData },
+    revalidate: 86400,
+  };
+}
+
+export default function ChangelogPage({
+  initialData,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const { posts, hasMore, loading, loadMore } = usePosts({
+    client,
+    initialData,
+  });
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <article key={post.id}>
+          <div>
+            {post.tags.map((tag) => (
+              <span key={tag}>{getTagLabel(tag)}</span>
+            ))}
+          </div>
+          <h2>{post.title}</h2>
+          <Markdown>{post.plain_text_content}</Markdown>
+        </article>
+      ))}
+      {hasMore && (
+        <button type="button" onClick={loadMore} disabled={loading}>
+          {loading ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+## Client-Only
+
+```tsx title="pages/changelog.tsx"
+import {
+  createChangesPageClient,
+  usePosts,
+  getTagLabel,
+} from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+export default function ChangelogPage() {
+  const { posts, hasMore, loading, loadMore } = usePosts({ client });
+
+  if (loading && posts.length === 0) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <article key={post.id}>
+          <div>
+            {post.tags.map((tag) => (
+              <span key={tag}>{getTagLabel(tag)}</span>
+            ))}
+          </div>
+          <h2>{post.title}</h2>
+          <Markdown>{post.plain_text_content}</Markdown>
+        </article>
+      ))}
+      {hasMore && (
+        <button type="button" onClick={loadMore} disabled={loading}>
+          {loading ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+## With Tailwind CSS
+
+```tsx title="pages/changelog.tsx"
+import {
+  createChangesPageClient,
+  usePosts,
+  getTagLabel,
+  type PostTag,
+} from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+const tagColors: Record<PostTag, string> = {
+  new: "bg-green-100 text-green-800",
+  fix: "bg-red-100 text-red-800",
+  improvement: "bg-blue-100 text-blue-800",
+  announcement: "bg-purple-100 text-purple-800",
+  alert: "bg-yellow-100 text-yellow-800",
+};
+
+export default function ChangelogPage() {
+  const { posts, hasMore, loading, loadMore } = usePosts({ client });
+
+  if (loading && posts.length === 0) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-gray-800" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-8 px-4 py-8">
+      {posts.map((post) => (
+        <article
+          key={post.id}
+          className="rounded-lg border border-gray-200 p-6"
+        >
+          <div className="mb-3 flex flex-wrap gap-2">
+            {post.tags.map((tag) => (
+              <span
+                key={tag}
+                className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${tagColors[tag]}`}
+              >
+                {getTagLabel(tag)}
+              </span>
+            ))}
+          </div>
+          <h2 className="mb-2 text-xl font-semibold text-gray-900">
+            {post.title}
+          </h2>
+          <div className="prose prose-sm text-gray-600">
+            <Markdown>{post.plain_text_content}</Markdown>
+          </div>
+        </article>
+      ))}
+      {hasMore && (
+        <button
+          type="button"
+          onClick={loadMore}
+          disabled={loading}
+          className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+        >
+          {loading ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
diff --git a/apps/docs/content/docs/sdk/react.mdx b/apps/docs/content/docs/sdk/react.mdx
new file mode 100644
index 0000000..2371963
--- /dev/null
+++ b/apps/docs/content/docs/sdk/react.mdx
@@ -0,0 +1,85 @@
+---
+title: React SDK
+description: React components and hooks for embedding changelogs.
+---
+
+## Installation
+
+```bash
+npm install @changespage/react react-markdown
+```
+
+## Usage
+
+```tsx
+"use client";
+
+import { createChangesPageClient, usePosts, ChangelogPost } from "@changespage/react";
+import Markdown from "react-markdown";
+
+const client = createChangesPageClient({
+  baseUrl: "https://your-page.changes.page",
+});
+
+function Changelog() {
+  const { posts, hasMore, loading, loadMore } = usePosts({ client });
+
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <ChangelogPost key={post.id} post={post}>
+          {({ title, plainText, tags, publicationDate }) => (
+            <article>
+              <h2>{title}</h2>
+              <time>{publicationDate?.toLocaleDateString()}</time>
+              <Markdown>{plainText}</Markdown>
+            </article>
+          )}
+        </ChangelogPost>
+      ))}
+      {hasMore && <button type="button" onClick={loadMore}>Load More</button>}
+    </div>
+  );
+}
+```
+
+## API
+
+### `usePosts(options)`
+
+Hook for fetching and managing posts.
+
+| Option        | Type                  | Description                    |
+| ------------- | --------------------- | ------------------------------ |
+| `client`      | `ChangesPageClient`   | Client instance                |
+| `initialData` | `UsePostsInitialData` | SSR initial data (optional)    |
+| `limit`       | `number`              | Posts per page (default: 10)   |
+
+Returns:
+
+| Property   | Type         | Description              |
+| ---------- | ------------ | ------------------------ |
+| `posts`    | `Post[]`     | Fetched posts            |
+| `hasMore`  | `boolean`    | More posts available     |
+| `loading`  | `boolean`    | Loading state            |
+| `error`    | `Error`      | Error if any             |
+| `loadMore` | `() => void` | Load next page           |
+| `refetch`  | `() => void` | Refresh posts            |
+
+### `<ChangelogPost>`
+
+Render prop component for displaying posts.
+
+```tsx
+<ChangelogPost post={post}>
+  {({ id, title, content, plainText, tags, publicationDate, url }) => (
+    // Your custom UI
+  )}
+</ChangelogPost>
+```
+
+### Re-exports
+
+The React SDK re-exports everything from `@changespage/core` including `createChangesPageClient`, `getTagLabel`, and all types.
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
index 803a8c1..0b0efb9 100644
--- a/packages/react-sdk/package.json
+++ b/packages/react-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@changespage/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,7 +18,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@changespage/core": "workspace:*"
+    "@changespage/core": "0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abdc0da..755825a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -467,8 +467,8 @@ importers:
   packages/react-sdk:
     dependencies:
       '@changespage/core':
-        specifier: workspace:*
-        version: link:../core-sdk
+        specifier: 0.2.0
+        version: 0.2.0
     devDependencies:
       '@types/react':
         specifier: ^18.3.18
@@ -648,6 +648,9 @@ packages:
   '@bufbuild/protobuf@1.10.0':
     resolution: {integrity: sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==}
 
+  '@changespage/core@0.2.0':
+    resolution: {integrity: sha512-Uwp0iECx5qMpZL5DDBxBvwEvNo0RJ+qjfbGTN7N28DoB3ir9MiZGT1U4/r1WFL+8Sb4wRKmw7nv3rFfAKw9nVA==}
+
   '@changespage/react@0.3.0':
     resolution: {integrity: sha512-wdGFb/om5/lJg2F2XBBJIrvBWfnnxgvGy9mFDn61dJNjSj6NHK6o8IRLWem+8GshY7Rwpj2LFpFbzgTVGQspLw==}
     peerDependencies:
@@ -6770,6 +6773,8 @@ snapshots:
 
   '@bufbuild/protobuf@1.10.0': {}
 
+  '@changespage/core@0.2.0': {}
+
   '@changespage/react@0.3.0(react@18.3.1)':
     dependencies:
       '@changespage/core': link:packages/core-sdk