diff --git a/view/next-project/src/components/users/DeleteModal.tsx b/view/next-project/src/components/users/DeleteModal.tsx
index cfaff48e7..6b3598dd5 100644
--- a/view/next-project/src/components/users/DeleteModal.tsx
+++ b/view/next-project/src/components/users/DeleteModal.tsx
@@ -4,7 +4,7 @@ import { multiDel } from '@api/api_methods';
 import { Modal, CloseButton, OutlinePrimaryButton, PrimaryButton } from '@components/common';
 import { User } from '@type/common';
 
-interface ModalProps {
+export interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
   children?: React.ReactNode;
   deleteUsers?: { users: User[]; ids: number[] };
diff --git a/view/next-project/src/components/users/EditModal.tsx b/view/next-project/src/components/users/EditModal.tsx
index 5f86c9f19..f11427366 100644
--- a/view/next-project/src/components/users/EditModal.tsx
+++ b/view/next-project/src/components/users/EditModal.tsx
@@ -6,7 +6,7 @@ import { ROLES } from '@/constants/role';
 import { put } from '@api/user';
 import { Bureau, User } from '@type/common';
 
-interface ModalProps {
+export interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
   id: number | string;
   bureaus: Bureau[];
diff --git a/view/next-project/src/components/users/index.ts b/view/next-project/src/components/users/index.ts
new file mode 100644
index 000000000..86919306e
--- /dev/null
+++ b/view/next-project/src/components/users/index.ts
@@ -0,0 +1,4 @@
+export { default as DeleteModal } from './DeleteModal';
+export { default as EditModal } from './EditModal';
+export { default as OpenDeleteModalButton } from './OpenDeleteModalButton';
+export { default as OpenEditModalButton } from './OpenEditModalButton';
diff --git a/view/next-project/src/stories/users/DeleteModal.stories.tsx b/view/next-project/src/stories/users/DeleteModal.stories.tsx
new file mode 100644
index 000000000..54fd24c6c
--- /dev/null
+++ b/view/next-project/src/stories/users/DeleteModal.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { DeleteModal } from '@components/users/';
+
+const meta: Meta<typeof DeleteModal> = {
+  title: 'FinanSu/users/DeleteModal',
+  component: DeleteModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};
diff --git a/view/next-project/src/stories/users/EditModal.stories.tsx b/view/next-project/src/stories/users/EditModal.stories.tsx
new file mode 100644
index 000000000..ac9dc514b
--- /dev/null
+++ b/view/next-project/src/stories/users/EditModal.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { EditModal } from '@components/users'; // 名前のインポートを修正
+
+const meta: Meta<typeof EditModal> = {
+  title: 'FinanSu/users/EditModal',
+  component: EditModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof EditModal> = (args) => <EditModal {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  setShowModal: () => {
+    // Add your implementation here
+  },
+  id: 1,
+  bureaus: [
+    { id: 1, name: 'Bureau 1' },
+    { id: 2, name: 'Bureau 2' },
+  ],
+  user: {
+    id: 1,
+    name: 'John Doe',
+    bureauID: 1,
+    roleID: 1,
+  },
+};
diff --git a/view/next-project/src/stories/users/OpenDeleteModalButton.stories.tsx b/view/next-project/src/stories/users/OpenDeleteModalButton.stories.tsx
new file mode 100644
index 000000000..7ca01db03
--- /dev/null
+++ b/view/next-project/src/stories/users/OpenDeleteModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenDeleteModalButton } from '@components/users';
+
+const meta: Meta<typeof OpenDeleteModalButton> = {
+  title: 'FinanSu/users/OpenDeleteModalButton',
+  component: OpenDeleteModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};
diff --git a/view/next-project/src/stories/users/OpenEditModalButton.stories.tsx b/view/next-project/src/stories/users/OpenEditModalButton.stories.tsx
new file mode 100644
index 000000000..710929565
--- /dev/null
+++ b/view/next-project/src/stories/users/OpenEditModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenEditModalButton } from '@components/users';
+
+const meta: Meta<typeof OpenEditModalButton> = {
+  title: 'FinanSu/users/OpenEditModalButton',
+  component: OpenEditModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};