diff --git a/view/next-project/src/components/teacher/index.ts b/view/next-project/src/components/teacher/index.ts
new file mode 100644
index 000000000..841446aa8
--- /dev/null
+++ b/view/next-project/src/components/teacher/index.ts
@@ -0,0 +1,6 @@
+export { default as AddModal } from './AddModal';
+export { default as DeleteModal } from './DeleteModal';
+export { default as EditModal } from './EditModal';
+export { default as OpenAddModalButton } from './OpenAddModalButton';
+export { default as OpenDeleteModalButton } from './OpenDeleteModalButton';
+export { default as OpenEditModalButton } from './OpenEditModalButton';
diff --git a/view/next-project/src/stories/teacher/AddModal.stories.tsx b/view/next-project/src/stories/teacher/AddModal.stories.tsx
new file mode 100644
index 000000000..7dfec3877
--- /dev/null
+++ b/view/next-project/src/stories/teacher/AddModal.stories.tsx
@@ -0,0 +1,36 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { SetStateAction } from 'react';
+import { AddModal } from '@components/teacher';
+import { Department } from '@type/common';
+
+export default {
+  title: 'FinanSu/teacher/AddModal',
+  component: AddModal,
+  argTypes: {},
+  tags: ['autodocs'],
+} as Meta<typeof AddModal>;
+
+const sampleDepartments: Department[] = [
+  {
+    id: 0,
+    name: '機械工学分野',
+  },
+  {
+    id: 1,
+    name: '機械工学科',
+  },
+];
+
+export const Primary: StoryFn<typeof AddModal> = (args) => <AddModal {...args} />;
+Primary.args = {
+  departments: sampleDepartments,
+  setShowModal: (value: SetStateAction<boolean>) => {
+    if (typeof value === 'boolean') {
+      console.log('Modal is now', value ? 'open' : 'closed');
+    } else {
+      // value が関数の場合、前の状態を仮定して新しい状態を計算
+      const newState = value(false); // ここでの false は仮の前状態
+      console.log('Modal is now', newState ? 'open' : 'closed');
+    }
+  },
+};
diff --git a/view/next-project/src/stories/teacher/DeleteModal.stories.tsx b/view/next-project/src/stories/teacher/DeleteModal.stories.tsx
new file mode 100644
index 000000000..0812e1ca2
--- /dev/null
+++ b/view/next-project/src/stories/teacher/DeleteModal.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { DeleteModal } from '@components/teacher';
+
+const meta: Meta<typeof DeleteModal> = {
+  title: 'FinanSu/teacher/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/teacher/EditModal.stories.tsx b/view/next-project/src/stories/teacher/EditModal.stories.tsx
new file mode 100644
index 000000000..67c595936
--- /dev/null
+++ b/view/next-project/src/stories/teacher/EditModal.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { SetStateAction } from 'react';
+import EditModal from '@components/teacher/EditModal';
+import { Teacher, Department } from '@type/common';
+
+export default {
+  title: 'FinanSu/teacher/EditModal',
+  component: EditModal,
+  argTypes: {},
+} as Meta<typeof EditModal>;
+
+const sampleTeacher: Teacher = {
+  id: 123,
+  name: '小笠原優心',
+  position: '准教授',
+  departmentID: 123,
+  room: 'string',
+  isBlack: true,
+  remark: 'test',
+  isDeleted: false,
+  createdAt: '2021-01-01T00:00:00',
+  updatedAt: '2021-01-01T00:00:00',
+};
+
+const sampleDepartments: Department[] = [
+  {
+    id: 123,
+    name: '情報工学科',
+  },
+  {
+    id: 124,
+    name: '機械工学科',
+  },
+];
+
+export const Primary: StoryFn<typeof EditModal> = (args) => <EditModal {...args} />;
+Primary.args = {
+  id: 123,
+  teacher: sampleTeacher,
+  departments: sampleDepartments,
+  setShowModal: (value: SetStateAction<boolean>) => {
+    if (typeof value === 'boolean') {
+      console.log('Modal is now', value ? 'open' : 'closed');
+    } else {
+      // value が関数の場合、前の状態を仮定して新しい状態を計算
+      const newState = value(false); // ここでの false は仮の前状態
+      console.log('Modal is now', newState ? 'open' : 'closed');
+    }
+  },
+};
diff --git a/view/next-project/src/stories/teacher/OpenAddModalButton.stories.tsx b/view/next-project/src/stories/teacher/OpenAddModalButton.stories.tsx
new file mode 100644
index 000000000..2f4d63de7
--- /dev/null
+++ b/view/next-project/src/stories/teacher/OpenAddModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenAddModalButton } from '@components/teacher';
+
+const meta: Meta<typeof OpenAddModalButton> = {
+  title: 'FinanSu/teacher/OpenAddModalButton',
+  component: OpenAddModalButton,
+  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/teacher/OpenDeleteModalButton.stories.tsx b/view/next-project/src/stories/teacher/OpenDeleteModalButton.stories.tsx
new file mode 100644
index 000000000..182be8ce1
--- /dev/null
+++ b/view/next-project/src/stories/teacher/OpenDeleteModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenDeleteModalButton } from '@components/teacher';
+
+const meta: Meta<typeof OpenDeleteModalButton> = {
+  title: 'FinanSu/teacher/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/teacher/OpenEditModalButton.stories.tsx b/view/next-project/src/stories/teacher/OpenEditModalButton.stories.tsx
new file mode 100644
index 000000000..27d3e831d
--- /dev/null
+++ b/view/next-project/src/stories/teacher/OpenEditModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenEditModalButton } from '@components/teacher';
+
+const meta: Meta<typeof OpenEditModalButton> = {
+  title: 'FinanSu/teacher/OpenEditModalButton',
+  component: OpenEditModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};