diff --git a/astro.config.ts b/astro.config.ts
index ef0fcdd..c4bf52f 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -1,3 +1,11 @@
+import type { AstroIntegration } from "astro";
 import { defineConfig } from "astro/config";
+import astrobook from "astrobook";
 
-export default defineConfig({});
+const integrations: AstroIntegration[] = [];
+
+if (process.env.ASTROBOOK) {
+  integrations.push(astrobook({ directory: "src/components" }));
+}
+
+export default defineConfig({ integrations });
diff --git a/bun.lockb b/bun.lockb
index 0e53b5d..67986d0 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 7daf8df..0d99c4f 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "astro dev",
+    "astrobook": "ASTROBOOK=1 astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "check:astro": "astro check",
@@ -15,6 +16,8 @@
   },
   "devDependencies": {
     "@astrojs/check": "0.9.4",
-    "@biomejs/biome": "1.9.4"
+    "@biomejs/biome": "1.9.4",
+    "@types/node": "22.9.0",
+    "astrobook": "0.5.1"
   }
 }
diff --git a/src/components/Bio/Bio.stories.ts b/src/components/Bio/Bio.stories.ts
new file mode 100644
index 0000000..3a62ebf
--- /dev/null
+++ b/src/components/Bio/Bio.stories.ts
@@ -0,0 +1,11 @@
+import Bio from "./Bio.astro";
+import * as stories from "./story.ts";
+
+export default {
+  title: "Bio",
+  component: Bio,
+};
+
+export const Default = { args: stories.Default };
+export const Japanese = { args: stories.Japanese };
+export const Long = { args: stories.Long };
diff --git a/src/components/Bio/story.ts b/src/components/Bio/story.ts
new file mode 100644
index 0000000..297fd5a
--- /dev/null
+++ b/src/components/Bio/story.ts
@@ -0,0 +1,20 @@
+import type { Props } from "./Bio.astro";
+
+export const Default: Props = {
+  name: "Bio Name",
+  description: "Bio Description",
+  icon: "https://github.com/withastro.png",
+};
+
+export const Japanese: Props = {
+  name: "名前",
+  description: "説明",
+  icon: "https://github.com/withastro.png",
+};
+
+export const Long: Props = {
+  name: "Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Bio Name",
+  description:
+    "Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Bio Description",
+  icon: "https://github.com/withastro.png",
+};