diff --git a/view/next-project/src/stories/common/Header.stories.tsx b/view/next-project/src/stories/common/Header.stories.tsx
new file mode 100644
index 000000000..371311b0a
--- /dev/null
+++ b/view/next-project/src/stories/common/Header.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { Header } from '@components/common';
+
+const meta: Meta<typeof Header> = {
+  title: 'FinanSu/common/Header',
+  component: Header,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof Header> = (args) => <Header {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  onSideNavOpen: () => console.log('SideNav is opened'),
+};
+
+export const WithoutSideNav = Template.bind({});
+WithoutSideNav.args = {};
diff --git a/view/next-project/src/stories/common/PrimaryLink.stories.tsx b/view/next-project/src/stories/common/PrimaryLink.stories.tsx
new file mode 100644
index 000000000..80cf654b2
--- /dev/null
+++ b/view/next-project/src/stories/common/PrimaryLink.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { PrimaryLink } from '@components/common';
+
+const meta: Meta<typeof PrimaryLink> = {
+  title: 'FinanSu/common/PrimaryLink',
+  component: PrimaryLink,
+  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/common/PullDown.stories.tsx b/view/next-project/src/stories/common/PullDown.stories.tsx
new file mode 100644
index 000000000..02c8d540b
--- /dev/null
+++ b/view/next-project/src/stories/common/PullDown.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react';
+import { PullDown } from '@components/common';
+
+const meta: Meta<typeof PullDown> = {
+  title: 'FinanSu/common/PullDown',
+  component: PullDown,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    placeholder: 'placeholder',
+    value: 'value',
+    children: 'children',
+  },
+};
diff --git a/view/next-project/src/stories/common/SearchSelect.stories.tsx b/view/next-project/src/stories/common/SearchSelect.stories.tsx
new file mode 100644
index 000000000..83b9d0875
--- /dev/null
+++ b/view/next-project/src/stories/common/SearchSelect.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/react';
+import { SearchSelect } from '@components/common';
+
+const meta: Meta<typeof SearchSelect> = {
+  title: 'FinanSu/common/SearchSelect',
+  component: SearchSelect,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    children: 'children',
+    value: [
+      {
+        value: 'value1',
+        label: 'label1',
+      },
+      {
+        value: 'value2',
+        label: 'label2',
+      },
+    ],
+    noOptionMessage: 'noOptionMessage',
+    placeholder: 'placeholder',
+  },
+};
diff --git a/view/next-project/src/stories/common/Tooltip.stories.tsx b/view/next-project/src/stories/common/Tooltip.stories.tsx
new file mode 100644
index 000000000..5bc21ad2a
--- /dev/null
+++ b/view/next-project/src/stories/common/Tooltip.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react';
+import { Tooltip } from '@components/common';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'FinanSu/common/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: 'children',
+    text: '説明文',
+  },
+};
diff --git a/view/next-project/src/stories/common/UnderlinePrimaryButton.stories.tsx b/view/next-project/src/stories/common/UnderlinePrimaryButton.stories.tsx
new file mode 100644
index 000000000..e7c9c435a
--- /dev/null
+++ b/view/next-project/src/stories/common/UnderlinePrimaryButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { UnderlinePrimaryButton } from '@components/common';
+
+const meta: Meta<typeof UnderlinePrimaryButton> = {
+  title: 'FinanSu/common/UnderlinePrimaryButton',
+  component: UnderlinePrimaryButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};