diff --git a/bun.lockb b/bun.lockb
index d78bb5da..6bf71081 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/composable/index.ts b/packages/composable/index.ts
index 3d4464b1..d64adf78 100644
--- a/packages/composable/index.ts
+++ b/packages/composable/index.ts
@@ -1,4 +1,5 @@
 export * from './lib/useArray'
 export * from './lib/useColor'
+export * from './lib/useNav'
 export * from './lib/useToast'
 export * from './lib/useTypography'
diff --git a/packages/composable/lib/useNav.ts b/packages/composable/lib/useNav.ts
new file mode 100644
index 00000000..3c875585
--- /dev/null
+++ b/packages/composable/lib/useNav.ts
@@ -0,0 +1,21 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export function useNav() {
+  const navRef = ref<HTMLElement | null>(null)
+  const showNav = ref(false)
+
+  function checkShowNav() {
+    showNav.value = window.pageYOffset > 50
+  }
+
+  onMounted(function () {
+    checkShowNav()
+    window.addEventListener('scroll', checkShowNav)
+  })
+
+  onUnmounted(function () {
+    window.removeEventListener('scroll', checkShowNav)
+  })
+
+  return { navRef, showNav }
+}
diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
index 70cc02b3..6bcb0b52 100644
--- a/packages/ui/.storybook/main.js
+++ b/packages/ui/.storybook/main.js
@@ -10,6 +10,7 @@ module.exports = {
     '@storybook/addon-backgrounds',
     '@storybook/addon-essentials',
     '@storybook/addon-links',
+    '@storybook/addon-viewport',
   ],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/packages/ui/assets/logo/vuefes_logo.svg b/packages/ui/assets/logo/vuefes_logo.svg
new file mode 100644
index 00000000..1979d366
--- /dev/null
+++ b/packages/ui/assets/logo/vuefes_logo.svg
@@ -0,0 +1,16 @@
+<svg width="224" height="40" viewBox="0 0 224 40" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.6027 20.1725C38.4326 20.1714 40.2277 19.6725 41.7957 18.7291C43.3637 17.7858 44.6455 16.4336 45.5038 14.8175C46.362 13.2013 46.7644 11.3822 46.6678 9.55481C46.5712 7.72747 45.9792 5.96085 44.9553 4.44422C43.9315 2.92759 42.5142 1.71811 40.8555 0.945375C39.1968 0.172635 37.359 -0.134246 35.5392 0.05761C33.7194 0.249466 31.9861 0.93283 30.525 2.03448C29.0639 3.13614 27.93 4.61457 27.2449 6.31137L23.5935 0L16.6659 12.0086L23.5945 24.0172L32.9027 8.02529H42.1401L23.5955 39.997L12.0472 19.9995L0.5 40H46.6869L35.1822 20.0683C35.6514 20.135 36.1247 20.1688 36.5986 20.1695L36.6027 20.1725Z" />
+<path d="M86.6698 31.6609H82.9172V30.4002C82.2869 31.4211 81.4765 31.931 79.4944 31.931C76.4591 31.931 73.9702 30.4296 73.9702 26.0163V16.6504H77.8149V25.4466C77.8149 27.8182 78.6557 28.6286 80.2431 28.6286C82.0147 28.6286 82.8555 27.5481 82.8555 25.476V16.6504H86.6698V31.6609Z" />
+<path d="M121.677 10.9463V14.5188H112.965V19.6525H120.771V23.1937H112.965V31.6601H108.762V10.9463H121.677Z" />
+<path d="M144.012 20.8836C143.666 20.4484 143.213 20.1094 142.698 19.8991C142.183 19.6889 141.622 19.6143 141.07 19.6827C140.079 19.6827 139.179 19.9862 139.179 20.8533C139.179 21.7204 139.988 22.0846 141.581 22.3244C145.276 22.895 147.136 24.3054 147.136 27.282C147.136 30.1645 145.124 31.9361 141.251 31.9361C138.189 31.9361 136.328 31.1854 135.037 29.4442L137.979 27.3427C138.579 28.1521 139.33 28.6337 141.191 28.6337C142.513 28.6337 143.323 28.1835 143.323 27.4024C143.323 26.4787 142.663 26.1711 140.772 25.8716C137.649 25.3658 135.368 24.0403 135.368 21.0152C135.368 18.163 137.409 16.3965 141.162 16.3965C143.624 16.3965 145.665 16.9671 146.836 18.8885L144.012 20.8836Z" />
+<path d="M156.499 26.8876C156.814 27.347 157.234 27.7236 157.726 27.9851C158.217 28.2465 158.765 28.3851 159.321 28.3891C161.333 28.3891 162.413 27.3085 162.413 23.7056V10.9463H166.616V23.7056C166.616 29.675 163.944 31.9312 159.591 31.9312C158.323 32.0128 157.055 31.7721 155.905 31.2314C154.755 30.6908 153.761 29.8678 153.015 28.8393L156.499 26.8876Z" />
+<path d="M65.028 24.8691V24.8762L60.4923 10.9463H55.8989L63.134 31.6611H66.9464L67.0961 31.2341L65.028 24.8691Z" />
+<path d="M67.8499 29.07L74.1522 10.9463H69.5588L65.7576 22.6291L67.8499 29.07Z" />
+<path d="M100.391 23.405C100.391 18.842 98.4396 16.3804 94.2064 16.3804C90.304 16.3804 88.0215 18.5719 88.0215 23.1056V25.1473C88.0215 29.0203 90.1826 31.9322 94.6859 31.9322C97.3883 31.9322 99.1296 31.2118 100.18 29.3805L97.3277 27.3995C97.0591 27.8541 96.6622 28.2192 96.1868 28.4489C95.7114 28.6786 95.1786 28.7627 94.6556 28.6905C92.5238 28.6905 91.8631 27.189 91.8338 25.1179V22.3862C91.9835 20.6753 92.7049 19.615 94.2357 19.615C95.6765 19.615 96.4616 20.4244 96.5456 22.3862H93.2199V25.1179H100.376L100.391 23.405Z" />
+<path d="M134.526 23.405C134.526 18.842 132.574 16.3804 128.341 16.3804C124.439 16.3804 122.156 18.5719 122.156 23.1056V25.1473C122.156 29.0203 124.317 31.9322 128.821 31.9322C131.523 31.9322 133.264 31.2118 134.315 29.3805L131.465 27.3985C131.197 27.8531 130.8 28.2182 130.325 28.4479C129.849 28.6776 129.316 28.7616 128.793 28.6895C126.662 28.6895 126.001 27.188 125.972 25.1169V22.3852C126.121 20.6743 126.842 19.614 128.373 19.614C129.814 19.614 130.599 20.4234 130.683 22.3852H127.356V25.1169H134.528L134.526 23.405Z" />
+<path d="M174.452 16.3804C171.36 16.3804 169.679 17.041 168.568 18.8723L171.27 20.7633C171.901 19.7728 172.621 19.5624 174.092 19.5624C176.253 19.5624 176.764 20.1026 176.764 21.7882V22.6594V25.4812V26.0518C176.764 28.0935 175.923 28.8443 174.182 28.8443C172.861 28.8443 171.991 28.304 171.991 27.1627C171.991 26.0214 172.684 25.4812 174.242 25.4812H175.381V22.6553H173.793C170.64 22.6553 168.238 24.0414 168.238 27.2184C168.238 30.281 170.399 31.9322 173.521 31.9322C174.158 32.0137 174.804 31.9063 175.38 31.6233C175.955 31.3403 176.435 30.8943 176.759 30.3407V31.662H180.512V21.8135C180.52 17.5216 178.321 16.3804 174.452 16.3804Z" />
+<path d="M214.231 17.911V16.6504H210.386V31.6609H214.231V17.911Z" />
+<path d="M217.594 16.3802C216.911 16.3719 216.236 16.5171 215.617 16.8052V19.9416C216.01 19.7603 216.44 19.6711 216.873 19.6806C218.434 19.6806 219.275 20.5214 219.275 22.8626V31.6588H223.088V22.2646C223.088 17.821 220.626 16.3802 217.594 16.3802Z" />
+<path d="M189.554 16.3803C188.94 16.3367 188.324 16.4268 187.749 16.6445C187.173 16.8621 186.652 17.2021 186.221 17.641V16.6535H182.376V37.3653H186.221V31.061V23.0155C186.221 20.824 187.062 19.623 188.893 19.623C190.784 19.623 191.535 20.9444 191.535 23.3453V24.9065C191.535 27.0676 190.964 28.6894 188.893 28.6894C188.449 28.7019 188.009 28.61 187.607 28.4213V31.7288C188.235 31.8772 188.878 31.9469 189.523 31.9362C193.396 31.9362 195.377 29.0537 195.377 25.1513V23.1055C195.377 18.8116 193.032 16.3803 189.554 16.3803Z" />
+<path d="M202.463 16.3804C199.371 16.3804 197.689 17.041 196.578 18.8723L199.281 20.7633C199.911 19.7728 200.631 19.5624 202.103 19.5624C204.264 19.5624 204.775 20.1026 204.775 21.7882V22.6594V25.4812V26.0518C204.775 28.0935 203.934 28.8443 202.193 28.8443C200.871 28.8443 200.001 28.304 200.001 27.1627C200.001 26.0214 200.694 25.4812 202.252 25.4812H203.389V22.6553H201.802C198.649 22.6553 196.249 24.0414 196.249 27.2184C196.249 30.281 198.41 31.9322 201.532 31.9322C202.168 32.0137 202.814 31.9063 203.39 31.6233C203.966 31.3403 204.446 30.8943 204.77 30.3407V31.662H208.531V21.8135C208.527 17.5216 206.336 16.3804 202.463 16.3804Z" />
+</svg>
diff --git a/packages/ui/components/CssResetButton.stories.ts b/packages/ui/components/common/CssResetButton.stories.ts
similarity index 95%
rename from packages/ui/components/CssResetButton.stories.ts
rename to packages/ui/components/common/CssResetButton.stories.ts
index 0519449f..08f7b88f 100644
--- a/packages/ui/components/CssResetButton.stories.ts
+++ b/packages/ui/components/common/CssResetButton.stories.ts
@@ -2,7 +2,7 @@ import { StoryFn } from '@storybook/vue3'
 import CssResetButton from './CssResetButton.vue'
 
 export default {
-  title: 'Example/CssResetButton',
+  title: 'common/CssResetButton',
   component: CssResetButton,
   args: {
     default: '<strong>Go!</strong>',
diff --git a/packages/ui/components/CssResetButton.vue b/packages/ui/components/common/CssResetButton.vue
similarity index 100%
rename from packages/ui/components/CssResetButton.vue
rename to packages/ui/components/common/CssResetButton.vue
diff --git a/packages/ui/components/common/Header.stories.ts b/packages/ui/components/common/Header.stories.ts
new file mode 100644
index 00000000..9194e4e7
--- /dev/null
+++ b/packages/ui/components/common/Header.stories.ts
@@ -0,0 +1,48 @@
+import { StoryFn } from '@storybook/vue3'
+import Header from './Header.vue'
+
+export default {
+  title: 'common/Header',
+  component: Header,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#35495e',
+        },
+        {
+          name: 'light',
+          value: '#fff',
+        },
+      ],
+    },
+  },
+  args: {
+    color: 'vue-blue',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Header },
+  setup() {
+    return { args }
+  },
+  template: '<Header v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+
+Default.parameters = {
+  layout: 'fullscreen',
+}
diff --git a/packages/ui/components/common/Header.vue b/packages/ui/components/common/Header.vue
new file mode 100644
index 00000000..4baae749
--- /dev/null
+++ b/packages/ui/components/common/Header.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Logo from './Logo.vue'
+import { useColor, useNav } from '@vuejs-jp/composable'
+
+const { navRef } = useNav()
+const { color } = useColor()
+</script>
+
+<template>
+  <nav
+    ref="navRef"
+    :style="{ backgroundColor: color('white') }"
+  >
+    <div class="nav-root">
+      <h1>
+        <Logo color="vue-blue" />
+      </h1>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+nav {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+.nav-root {
+  padding: 20px 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/ui/components/common/Logo.stories.ts b/packages/ui/components/common/Logo.stories.ts
new file mode 100644
index 00000000..97379c85
--- /dev/null
+++ b/packages/ui/components/common/Logo.stories.ts
@@ -0,0 +1,54 @@
+import { StoryFn } from '@storybook/vue3'
+import Logo from './Logo.vue'
+
+export default {
+  title: 'common/Logo',
+  component: Logo,
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        {
+          name: 'dark',
+          value: '#35495e',
+        },
+        {
+          name: 'light',
+          value: '#fff',
+        },
+      ],
+    },
+  },
+  args: {
+    color: 'vue-blue',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Logo },
+  setup() {
+    return { args }
+  },
+  template: '<Logo v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+
+export const Dark = Template.bind({})
+Dark.args = {
+  color: 'white',
+}
+Dark.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+}
diff --git a/packages/ui/components/common/Logo.vue b/packages/ui/components/common/Logo.vue
new file mode 100644
index 00000000..79ae606e
--- /dev/null
+++ b/packages/ui/components/common/Logo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import type { Color } from '@vuejs-jp/model'
+import { useColor } from '@vuejs-jp/composable'
+
+export type LogoProps = {
+  color: Color
+}
+
+const props = defineProps<LogoProps>()
+
+const svgComponent =
+  defineAsyncComponent(
+    () => import('../../assets/logo/vuefes_logo.svg?component'),
+  )
+
+const { color: fillColor } = useColor()
+</script>
+
+<template>
+  <component
+    :is="svgComponent"
+    :fill="fillColor(props.color)"
+  />
+</template>
diff --git a/packages/ui/components/common/SpHeader.stories.ts b/packages/ui/components/common/SpHeader.stories.ts
new file mode 100644
index 00000000..1e7e0db0
--- /dev/null
+++ b/packages/ui/components/common/SpHeader.stories.ts
@@ -0,0 +1,61 @@
+import { StoryFn } from '@storybook/vue3'
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
+import SpHeader from './SpHeader.vue'
+
+export default {
+  title: 'common/SpHeader',
+  component: SpHeader,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#35495e',
+        },
+        {
+          name: 'light',
+          value: '#fff',
+        },
+      ],
+    },
+    viewport: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        mobile1: {
+          name: 'Small mobile',
+          styles: { width: '375px', height: '667px' },
+        },
+      },
+    },
+  },
+  args: {
+    color: 'vue-blue',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SpHeader },
+  setup() {
+    return { args }
+  },
+  template: '<SpHeader v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+
+Default.parameters = {
+  layout: 'fullscreen',
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+}
diff --git a/packages/ui/components/common/SpHeader.vue b/packages/ui/components/common/SpHeader.vue
new file mode 100644
index 00000000..7ec58938
--- /dev/null
+++ b/packages/ui/components/common/SpHeader.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Logo from './Logo.vue'
+import { useColor, useNav } from '@vuejs-jp/composable'
+
+const { navRef } = useNav()
+const { color } = useColor()
+</script>
+
+<template>
+  <nav
+    ref="navRef"
+    :style="{ backgroundColor: color('white') }"
+  >
+    <div class="nav-root">
+      <h1>
+        <Logo color="vue-blue" />
+      </h1>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+nav {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+.nav-root {
+  padding: 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/ui/components/Typography.stories.ts b/packages/ui/components/common/Typography.stories.ts
similarity index 100%
rename from packages/ui/components/Typography.stories.ts
rename to packages/ui/components/common/Typography.stories.ts
diff --git a/packages/ui/components/Typography.vue b/packages/ui/components/common/Typography.vue
similarity index 100%
rename from packages/ui/components/Typography.vue
rename to packages/ui/components/common/Typography.vue
diff --git a/packages/ui/components/InputField.stories.ts b/packages/ui/components/forms/InputField.stories.ts
similarity index 100%
rename from packages/ui/components/InputField.stories.ts
rename to packages/ui/components/forms/InputField.stories.ts
diff --git a/packages/ui/components/InputField.vue b/packages/ui/components/forms/InputField.vue
similarity index 97%
rename from packages/ui/components/InputField.vue
rename to packages/ui/components/forms/InputField.vue
index 0d329346..3ae47951 100644
--- a/packages/ui/components/InputField.vue
+++ b/packages/ui/components/forms/InputField.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { InputHTMLAttributes, InputTypeHTMLAttribute } from 'vue'
 import { useColor, useTypography } from '@vuejs-jp/composable'
-import Typography from './Typography.vue'
+import Typography from '../common/Typography.vue'
 
 type _InputFieldProps = Omit<InputHTMLAttributes, 'onInput' | 'onBlur'>;
 interface Props extends /* @vue-ignore */ _InputFieldProps {
diff --git a/packages/ui/components/SubmitButton.stories.ts b/packages/ui/components/forms/SubmitButton.stories.ts
similarity index 100%
rename from packages/ui/components/SubmitButton.stories.ts
rename to packages/ui/components/forms/SubmitButton.stories.ts
diff --git a/packages/ui/components/SubmitButton.vue b/packages/ui/components/forms/SubmitButton.vue
similarity index 95%
rename from packages/ui/components/SubmitButton.vue
rename to packages/ui/components/forms/SubmitButton.vue
index fe03dd99..f5726f35 100644
--- a/packages/ui/components/SubmitButton.vue
+++ b/packages/ui/components/forms/SubmitButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ButtonHTMLAttributes } from 'vue'
-import CssResetButton from './CssResetButton.vue'
+import CssResetButton from '../common/CssResetButton.vue'
 import type { Color } from '@vuejs-jp/model'
 import { useColor } from '@vuejs-jp/composable'
 
diff --git a/packages/ui/components/TextAreaField.stories.ts b/packages/ui/components/forms/TextAreaField.stories.ts
similarity index 100%
rename from packages/ui/components/TextAreaField.stories.ts
rename to packages/ui/components/forms/TextAreaField.stories.ts
diff --git a/packages/ui/components/TextAreaField.vue b/packages/ui/components/forms/TextAreaField.vue
similarity index 97%
rename from packages/ui/components/TextAreaField.vue
rename to packages/ui/components/forms/TextAreaField.vue
index 75ec4205..722b81a1 100644
--- a/packages/ui/components/TextAreaField.vue
+++ b/packages/ui/components/forms/TextAreaField.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useColor, useTypography } from '@vuejs-jp/composable'
-import Typography from './Typography.vue'
+import Typography from '../common/Typography.vue'
 
 type Props = {
   /** HTMLAttribute id */
diff --git a/packages/ui/components/Icon.stories.ts b/packages/ui/components/icon/Icon.stories.ts
similarity index 100%
rename from packages/ui/components/Icon.stories.ts
rename to packages/ui/components/icon/Icon.stories.ts
diff --git a/packages/ui/components/Icon.vue b/packages/ui/components/icon/Icon.vue
similarity index 75%
rename from packages/ui/components/Icon.vue
rename to packages/ui/components/icon/Icon.vue
index 7e43aedf..94eb79d7 100644
--- a/packages/ui/components/Icon.vue
+++ b/packages/ui/components/icon/Icon.vue
@@ -14,16 +14,16 @@ const props = defineProps<IconProps>()
 const svgComponent =
   match<IconName>(props.name)
     .with('x', () => defineAsyncComponent(
-      () => import('../assets/icon/x_logo.svg?component'),
+      () => import('../../assets/icon/x_logo.svg?component'),
     ))
     .with('note', () => defineAsyncComponent(
-      () => import('../assets/icon/note_logo.svg?component'),
+      () => import('../../assets/icon/note_logo.svg?component'),
     ))
     .with('YouTube', () => defineAsyncComponent(
-      () => import('../assets/icon/youtube_logo.svg?component'),
+      () => import('../../assets/icon/youtube_logo.svg?component'),
     ))
     .with('GitHub', () => defineAsyncComponent(
-      () => import('../assets/icon/github_logo.svg?component'),
+      () => import('../../assets/icon/github_logo.svg?component'),
     ))
     .exhaustive()
 
diff --git a/packages/ui/components/IconButton.stories.ts b/packages/ui/components/icon/IconButton.stories.ts
similarity index 100%
rename from packages/ui/components/IconButton.stories.ts
rename to packages/ui/components/icon/IconButton.stories.ts
diff --git a/packages/ui/components/IconButton.vue b/packages/ui/components/icon/IconButton.vue
similarity index 100%
rename from packages/ui/components/IconButton.vue
rename to packages/ui/components/icon/IconButton.vue
diff --git a/packages/ui/nuxt.mjs b/packages/ui/nuxt.mjs
index 35deecb8..08467705 100644
--- a/packages/ui/nuxt.mjs
+++ b/packages/ui/nuxt.mjs
@@ -10,6 +10,7 @@ export default defineNuxtModule({
       dirs.push({
         path: join(__dirname, 'components'),
         prefix: 'VF',
+        pathPrefix: false,
       })
     },
   },
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9e8b077c..ac33cdf1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -20,6 +20,7 @@
     "@storybook/addon-backgrounds": "8.0.0-beta.2",
     "@storybook/addon-essentials": "8.0.0-beta.2",
     "@storybook/addon-links": "8.0.0-beta.2",
+    "@storybook/addon-viewport": "8.0.0-beta.2",
     "@storybook/builder-vite": "8.0.0-beta.2",
     "@storybook/vue3": "8.0.0-beta.2",
     "@storybook/vue3-vite": "8.0.0-beta.2",
diff --git a/yarn.lock b/yarn.lock
index 4106ced6..67126d1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4156,6 +4156,7 @@
     "@storybook/addon-backgrounds" "8.0.0-beta.2"
     "@storybook/addon-essentials" "8.0.0-beta.2"
     "@storybook/addon-links" "8.0.0-beta.2"
+    "@storybook/addon-viewport" "8.0.0-beta.2"
     "@storybook/builder-vite" "8.0.0-beta.2"
     "@storybook/vue3" "8.0.0-beta.2"
     "@storybook/vue3-vite" "8.0.0-beta.2"