diff --git a/packages/bezier-react/.storybook/main.ts b/packages/bezier-react/.storybook/main.ts
index 669284edd8..6f40efa130 100644
--- a/packages/bezier-react/.storybook/main.ts
+++ b/packages/bezier-react/.storybook/main.ts
@@ -12,7 +12,8 @@ function getAbsolutePath(value: string) {
 
 export default {
   stories: [
-    '../src/**/*.stories.(tsx|mdx)',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.tsx',
   ],
 
   addons: [
diff --git a/packages/bezier-react/src/alpha-components/DialogPrimitive/DialogPrimitive.mdx b/packages/bezier-react/src/alpha-components/DialogPrimitive/DialogPrimitive.mdx
new file mode 100644
index 0000000000..54662157bd
--- /dev/null
+++ b/packages/bezier-react/src/alpha-components/DialogPrimitive/DialogPrimitive.mdx
@@ -0,0 +1,29 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DialogPrimitive from './DialogPrimitive.stories'
+
+<Meta of={DialogPrimitive} />
+
+# DialogPrimitive
+
+`DialogPrimitive` is wrapper component for the radix-ui `Dialog` component. For more information, see [radix-ui documentation](https://www.radix-ui.com/primitives/docs/components/dialog).
+
+<Canvas of={DialogPrimitive.Primary} />
+
+## Anatomy
+
+`DialogPrimitive` is a composition of several components:
+
+```tsx
+<DialogPrimitive>
+  <DialogPrimitiveTrigger />
+  <DialogPrimitivePortal>
+    <DialogPrimitiveOverlay />
+    <DialogPrimitiveContent>
+      <DialogPrimitiveTitle />
+      <DialogPrimitiveDescription />
+      <DialogPrimitiveClose />
+    </DialogPrimitiveContent>
+  </DialogPrimitivePortal>
+</DialogPrimitive>
+```
diff --git a/packages/bezier-react/src/alpha-components/DialogPrimitive/DialogPrimitive.stories.tsx b/packages/bezier-react/src/alpha-components/DialogPrimitive/DialogPrimitive.stories.tsx
new file mode 100644
index 0000000000..d30e11fb63
--- /dev/null
+++ b/packages/bezier-react/src/alpha-components/DialogPrimitive/DialogPrimitive.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+
+import {
+  DialogPrimitive,
+  DialogPrimitiveClose,
+  DialogPrimitiveContent,
+  DialogPrimitiveDescription,
+  DialogPrimitiveOverlay,
+  DialogPrimitivePortal,
+  DialogPrimitiveTitle,
+  DialogPrimitiveTrigger,
+} from './DialogPrimitive'
+
+function DialogComposition() {
+  return (
+    <DialogPrimitive>
+      <DialogPrimitiveTrigger>Trigger</DialogPrimitiveTrigger>
+      <DialogPrimitivePortal>
+        <DialogPrimitiveOverlay style={{
+          position: 'fixed',
+          inset: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        }}
+        />
+        <DialogPrimitiveContent style={{
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          backgroundColor: 'white',
+        }}
+        >
+          <DialogPrimitiveTitle>Title</DialogPrimitiveTitle>
+          <DialogPrimitiveDescription>Description</DialogPrimitiveDescription>
+          <div>Content</div>
+          <DialogPrimitiveClose>Close</DialogPrimitiveClose>
+        </DialogPrimitiveContent>
+      </DialogPrimitivePortal>
+    </DialogPrimitive>
+  )
+}
+
+const meta: Meta<typeof DialogComposition> = {
+  component: DialogComposition,
+}
+
+export const Primary: StoryObj = {}
+
+export default meta
diff --git a/packages/bezier-react/src/alpha-components/TooltipPrimitive/TooltipPrimitive.mdx b/packages/bezier-react/src/alpha-components/TooltipPrimitive/TooltipPrimitive.mdx
new file mode 100644
index 0000000000..fd10201311
--- /dev/null
+++ b/packages/bezier-react/src/alpha-components/TooltipPrimitive/TooltipPrimitive.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as TooltipPrimitive from './TooltipPrimitive.stories'
+
+<Meta of={TooltipPrimitive} />
+
+# TooltipPrimitive
+
+`TooltipPrimitive` is wrapper component for the radix-ui `Tooltip` component. For more information, see [radix-ui documentation](https://www.radix-ui.com/primitives/docs/components/tooltip).
+
+<Canvas of={TooltipPrimitive.Primary} />
+
+## Anatomy
+
+`TooltipPrimitive` is a composition of several components:
+
+```tsx
+<TooltipPrimitiveProvider>
+  <TooltipPrimitive>
+    <TooltipPrimitiveTrigger />
+    <TooltipPrimitivePortal>
+      <TooltipPrimitiveContent>
+        <TooltipPrimitiveArrow />
+      </TooltipPrimitiveContent>
+    </TooltipPrimitivePortal>
+  </TooltipPrimitive>
+</TooltipPrimitiveProvider>
+```
diff --git a/packages/bezier-react/src/alpha-components/TooltipPrimitive/TooltipPrimitive.stories.tsx b/packages/bezier-react/src/alpha-components/TooltipPrimitive/TooltipPrimitive.stories.tsx
new file mode 100644
index 0000000000..bc61e668e4
--- /dev/null
+++ b/packages/bezier-react/src/alpha-components/TooltipPrimitive/TooltipPrimitive.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+
+import {
+  TooltipPrimitive,
+  TooltipPrimitiveArrow,
+  TooltipPrimitiveContent,
+  TooltipPrimitivePortal,
+  TooltipPrimitiveProvider,
+  TooltipPrimitiveTrigger,
+} from './TooltipPrimitive'
+
+function TooltipComposition() {
+  return (
+    <TooltipPrimitiveProvider>
+      <TooltipPrimitive>
+        <TooltipPrimitiveTrigger>Trigger</TooltipPrimitiveTrigger>
+        <TooltipPrimitivePortal>
+          <TooltipPrimitiveContent>
+            Content
+            <TooltipPrimitiveArrow />
+          </TooltipPrimitiveContent>
+        </TooltipPrimitivePortal>
+      </TooltipPrimitive>
+    </TooltipPrimitiveProvider>
+  )
+}
+
+const meta: Meta<typeof TooltipComposition> = {
+  component: TooltipComposition,
+}
+
+export const Primary: StoryObj = {}
+
+export default meta
diff --git a/packages/bezier-react/src/stories/changelog.stories.mdx b/packages/bezier-react/src/stories/changelog.mdx
similarity index 100%
rename from packages/bezier-react/src/stories/changelog.stories.mdx
rename to packages/bezier-react/src/stories/changelog.mdx
diff --git a/packages/bezier-react/src/stories/readme.stories.mdx b/packages/bezier-react/src/stories/readme.mdx
similarity index 100%
rename from packages/bezier-react/src/stories/readme.stories.mdx
rename to packages/bezier-react/src/stories/readme.mdx