diff --git a/apps/stage-tamagotchi/package.json b/apps/stage-tamagotchi/package.json
index 12aa280da..13333189b 100644
--- a/apps/stage-tamagotchi/package.json
+++ b/apps/stage-tamagotchi/package.json
@@ -24,6 +24,7 @@
     "@pixiv/three-vrm-core": "^3.4.0",
     "@proj-airi/drizzle-duckdb-wasm": "catalog:",
     "@proj-airi/stage-ui": "workspace:^",
+    "@proj-airi/ui": "workspace:^",
     "@ricky0123/vad-web": "^0.0.22",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-os": ">=2.2.1",
diff --git a/apps/stage-tamagotchi/src/components/InteractiveArea.vue b/apps/stage-tamagotchi/src/components/InteractiveArea.vue
index b40b9a780..cca16476c 100644
--- a/apps/stage-tamagotchi/src/components/InteractiveArea.vue
+++ b/apps/stage-tamagotchi/src/components/InteractiveArea.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/shared-providers'
 
-import { BasicTextarea } from '@proj-airi/stage-ui/components'
 import { useMicVAD } from '@proj-airi/stage-ui/composables'
 import { useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
+import { BasicTextarea } from '@proj-airi/ui/Form'
 import { invoke } from '@tauri-apps/api/core'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
index 2ff76b389..eb11fde2d 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ccv3 } from '@proj-airi/ccc'
 
-import { InputFile } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
+import { InputFile } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
index 838264ec2..acefea4e2 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { RadioCardDetailManySelect, RadioCardSimple } from '@proj-airi/stage-ui/components'
 import { useConsciousnessStore, useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { RadioCardDetailManySelect, RadioCardSimple } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
index 6e338d0d2..365b62ea9 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 
+import { Skeleton, TestDummyMarker } from '@proj-airi/stage-ui/components'
+import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import {
   FieldCheckbox,
   FieldInput,
   FieldRange,
   RadioCardDetailManySelect,
   RadioCardSimple,
-  Skeleton,
-  TestDummyMarker,
   Textarea,
   VoiceCardManySelect,
-} from '@proj-airi/stage-ui/components'
-import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+} from '@proj-airi/ui/Form'
 import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue b/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue
index 0b740fbd6..d4072a896 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue
@@ -3,11 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue b/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue
index 5394f09e1..1fa2df4b0 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue
@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldCheckbox,
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldCheckbox, FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue b/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue
index c7dc397b0..3a5c92868 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue
@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnMicrosoftOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
index b0ac7b821..b11e61aaf 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
@@ -2,7 +2,6 @@
 import type { RemovableRef } from '@vueuse/core'
 
 import {
-  FieldKeyValues,
   ProviderAdvancedSettings,
   ProviderBaseUrlInput,
   ProviderBasicSettings,
@@ -10,6 +9,7 @@ import {
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { FieldKeyValues } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue b/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue
index 327b30f4a..c143debfc 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue
@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json
index f3223e717..3706b6bb6 100644
--- a/apps/stage-web/package.json
+++ b/apps/stage-web/package.json
@@ -27,6 +27,7 @@
     "@proj-airi/drizzle-duckdb-wasm": "catalog:",
     "@proj-airi/server-sdk": "workspace:^",
     "@proj-airi/stage-ui": "workspace:^",
+    "@proj-airi/ui": "workspace:^",
     "@proj-airi/ui-transitions": "workspace:^",
     "@ricky0123/vad-web": "^0.0.22",
     "@standard-schema/spec": "^1.0.0",
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index 80e99cbfc..9b3476b23 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/shared-providers'
 
-import { BasicTextarea, TransitionVertical } from '@proj-airi/stage-ui/components'
+import { TransitionVertical } from '@proj-airi/stage-ui/components'
 import { useMicVAD, useWhisper } from '@proj-airi/stage-ui/composables'
 import WhisperWorker from '@proj-airi/stage-ui/libs/workers/worker?worker&url'
 import { useAudioContext, useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
+import { BasicTextarea } from '@proj-airi/ui/Form'
 import { useDevicesList } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
index e9ff178ce..e15279dd9 100644
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/shared-providers'
 
-import { BasicTextarea } from '@proj-airi/stage-ui/components'
 import { useMicVAD } from '@proj-airi/stage-ui/composables'
 import { useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
+import { BasicTextarea } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/devtools/background-remove.vue b/apps/stage-web/src/pages/devtools/background-remove.vue
index 177a3403a..247fded01 100644
--- a/apps/stage-web/src/pages/devtools/background-remove.vue
+++ b/apps/stage-web/src/pages/devtools/background-remove.vue
@@ -2,7 +2,7 @@
 import type { PreTrainedModel, Processor } from '@huggingface/transformers'
 
 import { AutoModel, AutoProcessor, env, RawImage } from '@huggingface/transformers'
-import { InputFile } from '@proj-airi/stage-ui/components'
+import { InputFile } from '@proj-airi/ui/Form'
 import { check } from 'gpuu/webgpu'
 import { computed, onMounted, ref } from 'vue'
 
diff --git a/apps/stage-web/src/pages/devtools/vibrant.vue b/apps/stage-web/src/pages/devtools/vibrant.vue
index de3b43bd4..f9e213b9f 100644
--- a/apps/stage-web/src/pages/devtools/vibrant.vue
+++ b/apps/stage-web/src/pages/devtools/vibrant.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { InputFile } from '@proj-airi/stage-ui/components'
+import { InputFile } from '@proj-airi/ui/Form'
 import { Vibrant } from 'node-vibrant/browser'
 import { ref, watch } from 'vue'
 
diff --git a/apps/stage-web/src/pages/settings/airi-card/index.vue b/apps/stage-web/src/pages/settings/airi-card/index.vue
index 2ff76b389..eb11fde2d 100644
--- a/apps/stage-web/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ccv3 } from '@proj-airi/ccc'
 
-import { InputFile } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
+import { InputFile } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index 838264ec2..acefea4e2 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { RadioCardDetailManySelect, RadioCardSimple } from '@proj-airi/stage-ui/components'
 import { useConsciousnessStore, useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { RadioCardDetailManySelect, RadioCardSimple } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index 6e338d0d2..365b62ea9 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 
+import { Skeleton, TestDummyMarker } from '@proj-airi/stage-ui/components'
+import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import {
   FieldCheckbox,
   FieldInput,
   FieldRange,
   RadioCardDetailManySelect,
   RadioCardSimple,
-  Skeleton,
-  TestDummyMarker,
   Textarea,
   VoiceCardManySelect,
-} from '@proj-airi/stage-ui/components'
-import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+} from '@proj-airi/ui/Form'
 import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
diff --git a/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue b/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue
index 0b740fbd6..d4072a896 100644
--- a/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue
+++ b/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue
@@ -3,11 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
index 5394f09e1..1fa2df4b0 100644
--- a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldCheckbox,
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldCheckbox, FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue b/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue
index c7dc397b0..3a5c92868 100644
--- a/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue
+++ b/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue
@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnMicrosoftOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/providers/ollama.vue b/apps/stage-web/src/pages/settings/providers/ollama.vue
index b0ac7b821..f2c2c2c0a 100644
--- a/apps/stage-web/src/pages/settings/providers/ollama.vue
+++ b/apps/stage-web/src/pages/settings/providers/ollama.vue
@@ -2,7 +2,6 @@
 import type { RemovableRef } from '@vueuse/core'
 
 import {
-  FieldKeyValues,
   ProviderAdvancedSettings,
   ProviderBaseUrlInput,
   ProviderBasicSettings,
@@ -10,6 +9,7 @@ import {
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { FieldKeyValues } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -112,8 +112,8 @@ watch(headers, (headers) => {
           :description="t('settings.pages.providers.common.section.advanced.fields.field.headers.description')"
           :key-placeholder="t('settings.pages.providers.common.section.advanced.fields.field.headers.key.placeholder')"
           :value-placeholder="t('settings.pages.providers.common.section.advanced.fields.field.headers.value.placeholder')"
-          @add="(key, value) => addKeyValue(headers, key, value)"
-          @remove="(index) => removeKeyValue(index, headers)"
+          @add="(key: string, value: string) => addKeyValue(headers, key, value)"
+          @remove="(index: number) => removeKeyValue(index, headers)"
         />
       </ProviderAdvancedSettings>
     </ProviderSettingsContainer>
diff --git a/apps/stage-web/src/pages/settings/providers/volcengine.vue b/apps/stage-web/src/pages/settings/providers/volcengine.vue
index 327b30f4a..c143debfc 100644
--- a/apps/stage-web/src/pages/settings/providers/volcengine.vue
+++ b/apps/stage-web/src/pages/settings/providers/volcengine.vue
@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/test/filter-message.vue b/apps/stage-web/src/pages/test/filter-message.vue
index ddbd62ca9..bbe8eea66 100644
--- a/apps/stage-web/src/pages/test/filter-message.vue
+++ b/apps/stage-web/src/pages/test/filter-message.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Textarea } from '@proj-airi/stage-ui/components'
+import { Textarea } from '@proj-airi/ui/Form'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/apps/stage-web/src/pages/test/queues/delays.vue b/apps/stage-web/src/pages/test/queues/delays.vue
index d0270962f..408735a86 100644
--- a/apps/stage-web/src/pages/test/queues/delays.vue
+++ b/apps/stage-web/src/pages/test/queues/delays.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Textarea } from '@proj-airi/stage-ui/components'
 import { useDelayMessageQueue } from '@proj-airi/stage-ui/composables'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
+import { Textarea } from '@proj-airi/ui/Form'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/apps/stage-web/src/pages/test/queues/emotions.vue b/apps/stage-web/src/pages/test/queues/emotions.vue
index 081b3f04b..1f13f50d1 100644
--- a/apps/stage-web/src/pages/test/queues/emotions.vue
+++ b/apps/stage-web/src/pages/test/queues/emotions.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Emotion } from '@proj-airi/stage-ui/constants/emotions'
 
-import { Textarea } from '@proj-airi/stage-ui/components'
 import { useQueue } from '@proj-airi/stage-ui/composables/queue'
 import { useEmotionsMessageQueue } from '@proj-airi/stage-ui/composables/queues'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
+import { Textarea } from '@proj-airi/ui/Form'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/apps/stage-web/src/pages/test/queues/messages.vue b/apps/stage-web/src/pages/test/queues/messages.vue
index 005eb3608..da7b8ae93 100644
--- a/apps/stage-web/src/pages/test/queues/messages.vue
+++ b/apps/stage-web/src/pages/test/queues/messages.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Textarea } from '@proj-airi/stage-ui/components'
 import { useQueue } from '@proj-airi/stage-ui/composables/queue'
 import { useMessageContentQueue } from '@proj-airi/stage-ui/composables/queues'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
+import { Textarea } from '@proj-airi/ui/Form'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json
index 23bb405c4..ad922ae0b 100644
--- a/packages/stage-ui/package.json
+++ b/packages/stage-ui/package.json
@@ -73,6 +73,7 @@
     "@proj-airi/ccc": "workspace:^",
     "@proj-airi/drizzle-duckdb-wasm": "catalog:",
     "@proj-airi/server-sdk": "workspace:^",
+    "@proj-airi/ui": "workspace:^",
     "@vueuse/core": "^13.1.0",
     "@vueuse/motion": "^3.0.3",
     "@xsai-transformers/embed": "^0.0.5",
diff --git a/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue b/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue
index e0c2e0305..66b723f21 100644
--- a/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue
+++ b/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { FieldRange, Radio } from '@proj-airi/ui/Form'
 import { onBeforeUnmount, ref, watch } from 'vue'
 
-import FieldRange from '../Form/Field/FieldRange.vue'
-import Radio from '../Form/Radio/Radio.vue'
 import AudioSpectrum from './AudioSpectrum.vue'
 import AudioSpectrumVisualizer from './AudioSpectrumVisualizer.vue'
 
diff --git a/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
index 2c87e992b..ebcc7a7a0 100644
--- a/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FieldInput from '../Form/Field/FieldInput.vue'
+import { FieldInput } from '@proj-airi/ui/Form'
 
 const props = defineProps<{
   placeholder?: string
diff --git a/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
index dcc3a39d2..8619179de 100644
--- a/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import { FieldInput } from '@proj-airi/ui/Form'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import FieldInput from '../Form/Field/FieldInput.vue'
-
 const props = defineProps<{
   providerName: string
   placeholder?: string
diff --git a/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
index b1f64654e..96d988e84 100644
--- a/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FieldInput from '../Form/Field/FieldInput.vue'
+import { FieldInput } from '@proj-airi/ui/Form'
 
 const props = defineProps<{
   placeholder?: string
diff --git a/packages/stage-ui/src/components/Providers/SpeechPlayground.vue b/packages/stage-ui/src/components/Providers/SpeechPlayground.vue
index 49094eda1..31bc6b81d 100644
--- a/packages/stage-ui/src/components/Providers/SpeechPlayground.vue
+++ b/packages/stage-ui/src/components/Providers/SpeechPlayground.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { VoiceInfo } from '../../stores'
 
+import { FieldCheckbox } from '@proj-airi/ui/Form'
 import { onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { FieldCheckbox, TestDummyMarker } from '../index'
+import { TestDummyMarker } from '../index'
 
 const props = defineProps<{
   // Input fields
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index a4a9ba885..f109bba43 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/packages/stage-ui/src/components/index.ts
@@ -1,6 +1,5 @@
 export * from './Button'
 export { default as Collapsable } from './Collapsable.vue'
-export * from './Form'
 export * from './Gadgets'
 export * from './Graphics'
 export * from './Layouts'
diff --git a/packages/ui/build.config.ts b/packages/ui/build.config.ts
new file mode 100644
index 000000000..b9de7c711
--- /dev/null
+++ b/packages/ui/build.config.ts
@@ -0,0 +1,11 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    { builder: 'mkdist', input: './src/', outDir: './dist/', pattern: '**/*.vue', loaders: ['vue'] },
+    { builder: 'mkdist', input: './src/', outDir: './dist/', pattern: '**/*.ts', format: 'esm', loaders: ['js'] },
+  ],
+  declaration: true,
+  sourcemap: true,
+  clean: true,
+})
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 000000000..d5517f032
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@proj-airi/ui",
+  "type": "module",
+  "private": true,
+  "description": "A collection of UI components that used by Project Airi",
+  "author": {
+    "name": "Neko Ayaka",
+    "email": "neko@ayaka.moe",
+    "url": "https://github.com/nekomeowww"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moeru-ai/airi.git",
+    "directory": "packages/ui"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./Form": {
+      "types": "./dist/Form/index.d.ts",
+      "import": "./dist/Form/index.mjs"
+    }
+  },
+  "scripts": {
+    "dev": "pnpm run stub",
+    "stub": "unbuild --stub",
+    "build": "unbuild",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@proj-airi/stage-ui": "workspace:*",
+    "@vueuse/core": "^13.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@unocss/reset": "^66.1.0-beta.12",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "vue-tsc": "^3.0.0-alpha.4"
+  }
+}
diff --git a/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue b/packages/ui/src/Form/Checkbox/Checkbox.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
rename to packages/ui/src/Form/Checkbox/Checkbox.story.vue
diff --git a/packages/stage-ui/src/components/Form/Checkbox/Checkbox.vue b/packages/ui/src/Form/Checkbox/Checkbox.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Checkbox/Checkbox.vue
rename to packages/ui/src/Form/Checkbox/Checkbox.vue
diff --git a/packages/stage-ui/src/components/Form/Checkbox/index.ts b/packages/ui/src/Form/Checkbox/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Form/Checkbox/index.ts
rename to packages/ui/src/Form/Checkbox/index.ts
diff --git a/packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue b/packages/ui/src/Form/Field/FieldCheckbox.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue
rename to packages/ui/src/Form/Field/FieldCheckbox.story.vue
diff --git a/packages/stage-ui/src/components/Form/Field/FieldCheckbox.vue b/packages/ui/src/Form/Field/FieldCheckbox.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldCheckbox.vue
rename to packages/ui/src/Form/Field/FieldCheckbox.vue
diff --git a/packages/stage-ui/src/components/Form/Field/FieldInput.story.vue b/packages/ui/src/Form/Field/FieldInput.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldInput.story.vue
rename to packages/ui/src/Form/Field/FieldInput.story.vue
diff --git a/packages/stage-ui/src/components/Form/Field/FieldInput.vue b/packages/ui/src/Form/Field/FieldInput.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldInput.vue
rename to packages/ui/src/Form/Field/FieldInput.vue
diff --git a/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue b/packages/ui/src/Form/Field/FieldKeyValues.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
rename to packages/ui/src/Form/Field/FieldKeyValues.story.vue
diff --git a/packages/stage-ui/src/components/Form/Field/FieldKeyValues.vue b/packages/ui/src/Form/Field/FieldKeyValues.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldKeyValues.vue
rename to packages/ui/src/Form/Field/FieldKeyValues.vue
diff --git a/packages/stage-ui/src/components/Form/Field/FieldRange.story.vue b/packages/ui/src/Form/Field/FieldRange.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldRange.story.vue
rename to packages/ui/src/Form/Field/FieldRange.story.vue
diff --git a/packages/stage-ui/src/components/Form/Field/FieldRange.vue b/packages/ui/src/Form/Field/FieldRange.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/FieldRange.vue
rename to packages/ui/src/Form/Field/FieldRange.vue
diff --git a/packages/stage-ui/src/components/Form/Field/index.ts b/packages/ui/src/Form/Field/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Form/Field/index.ts
rename to packages/ui/src/Form/Field/index.ts
diff --git a/packages/stage-ui/src/components/Form/Input/Input.story.vue b/packages/ui/src/Form/Input/Input.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Input/Input.story.vue
rename to packages/ui/src/Form/Input/Input.story.vue
diff --git a/packages/stage-ui/src/components/Form/Input/Input.vue b/packages/ui/src/Form/Input/Input.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Input/Input.vue
rename to packages/ui/src/Form/Input/Input.vue
diff --git a/packages/stage-ui/src/components/Form/Input/InputFile.story.vue b/packages/ui/src/Form/Input/InputFile.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Input/InputFile.story.vue
rename to packages/ui/src/Form/Input/InputFile.story.vue
diff --git a/packages/stage-ui/src/components/Form/Input/InputFile.vue b/packages/ui/src/Form/Input/InputFile.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Input/InputFile.vue
rename to packages/ui/src/Form/Input/InputFile.vue
diff --git a/packages/stage-ui/src/components/Form/Input/InputKeyValue.story.vue b/packages/ui/src/Form/Input/InputKeyValue.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Input/InputKeyValue.story.vue
rename to packages/ui/src/Form/Input/InputKeyValue.story.vue
diff --git a/packages/stage-ui/src/components/Form/Input/InputKeyValue.vue b/packages/ui/src/Form/Input/InputKeyValue.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Input/InputKeyValue.vue
rename to packages/ui/src/Form/Input/InputKeyValue.vue
diff --git a/packages/stage-ui/src/components/Form/Input/index.ts b/packages/ui/src/Form/Input/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Form/Input/index.ts
rename to packages/ui/src/Form/Input/index.ts
diff --git a/packages/stage-ui/src/components/Form/Radio/Radio.vue b/packages/ui/src/Form/Radio/Radio.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Radio/Radio.vue
rename to packages/ui/src/Form/Radio/Radio.vue
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue b/packages/ui/src/Form/Radio/RadioCardDetail.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
rename to packages/ui/src/Form/Radio/RadioCardDetail.story.vue
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue b/packages/ui/src/Form/Radio/RadioCardDetail.vue
similarity index 98%
rename from packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
rename to packages/ui/src/Form/Radio/RadioCardDetail.vue
index 1d57f45b0..e7c7a598d 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
+++ b/packages/ui/src/Form/Radio/RadioCardDetail.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { TransitionVertical } from '@proj-airi/stage-ui/components'
 import { ref } from 'vue'
 
-import TransitionVertical from '../../TransitionVertical.vue'
 import Input from '../Input/Input.vue'
 
 withDefaults(defineProps<{
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue b/packages/ui/src/Form/Radio/RadioCardSimple.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
rename to packages/ui/src/Form/Radio/RadioCardSimple.story.vue
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue b/packages/ui/src/Form/Radio/RadioCardSimple.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
rename to packages/ui/src/Form/Radio/RadioCardSimple.vue
diff --git a/packages/stage-ui/src/components/Form/Radio/index.ts b/packages/ui/src/Form/Radio/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Form/Radio/index.ts
rename to packages/ui/src/Form/Radio/index.ts
diff --git a/packages/stage-ui/src/components/Form/RadioCardDetailManySelect.vue b/packages/ui/src/Form/RadioCardDetailManySelect.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/RadioCardDetailManySelect.vue
rename to packages/ui/src/Form/RadioCardDetailManySelect.vue
diff --git a/packages/stage-ui/src/components/Form/Range/Range.story.vue b/packages/ui/src/Form/Range/Range.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Range/Range.story.vue
rename to packages/ui/src/Form/Range/Range.story.vue
diff --git a/packages/stage-ui/src/components/Form/Range/Range.vue b/packages/ui/src/Form/Range/Range.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Range/Range.vue
rename to packages/ui/src/Form/Range/Range.vue
diff --git a/packages/stage-ui/src/components/Form/Range/index.ts b/packages/ui/src/Form/Range/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Form/Range/index.ts
rename to packages/ui/src/Form/Range/index.ts
diff --git a/packages/stage-ui/src/components/Form/Textarea/Basic.story.vue b/packages/ui/src/Form/Textarea/Basic.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
rename to packages/ui/src/Form/Textarea/Basic.story.vue
diff --git a/packages/stage-ui/src/components/Form/Textarea/Basic.vue b/packages/ui/src/Form/Textarea/Basic.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Textarea/Basic.vue
rename to packages/ui/src/Form/Textarea/Basic.vue
diff --git a/packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue b/packages/ui/src/Form/Textarea/Textarea.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
rename to packages/ui/src/Form/Textarea/Textarea.story.vue
diff --git a/packages/stage-ui/src/components/Form/Textarea/Textarea.vue b/packages/ui/src/Form/Textarea/Textarea.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/Textarea/Textarea.vue
rename to packages/ui/src/Form/Textarea/Textarea.vue
diff --git a/packages/stage-ui/src/components/Form/Textarea/index.ts b/packages/ui/src/Form/Textarea/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Form/Textarea/index.ts
rename to packages/ui/src/Form/Textarea/index.ts
diff --git a/packages/stage-ui/src/components/Form/VoiceCard.story.vue b/packages/ui/src/Form/VoiceCard.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/VoiceCard.story.vue
rename to packages/ui/src/Form/VoiceCard.story.vue
diff --git a/packages/stage-ui/src/components/Form/VoiceCard.vue b/packages/ui/src/Form/VoiceCard.vue
similarity index 97%
rename from packages/stage-ui/src/components/Form/VoiceCard.vue
rename to packages/ui/src/Form/VoiceCard.vue
index 9d6b7a596..9b630c535 100644
--- a/packages/stage-ui/src/components/Form/VoiceCard.vue
+++ b/packages/ui/src/Form/VoiceCard.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import AudioSpectrum from '../Gadgets/AudioSpectrum.vue'
-import AudioSpectrumVisualizer from '../Gadgets/AudioSpectrumVisualizer.vue'
-import TransitionVertical from '../TransitionVertical.vue'
+import { AudioSpectrum, AudioSpectrumVisualizer, TransitionVertical } from '@proj-airi/stage-ui/components'
+
 import Input from './Input/Input.vue'
 
 interface VoiceLanguage {
diff --git a/packages/stage-ui/src/components/Form/VoiceCardManySelect.story.vue b/packages/ui/src/Form/VoiceCardManySelect.story.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/VoiceCardManySelect.story.vue
rename to packages/ui/src/Form/VoiceCardManySelect.story.vue
diff --git a/packages/stage-ui/src/components/Form/VoiceCardManySelect.vue b/packages/ui/src/Form/VoiceCardManySelect.vue
similarity index 100%
rename from packages/stage-ui/src/components/Form/VoiceCardManySelect.vue
rename to packages/ui/src/Form/VoiceCardManySelect.vue
diff --git a/packages/stage-ui/src/components/Form/index.ts b/packages/ui/src/Form/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Form/index.ts
rename to packages/ui/src/Form/index.ts
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 000000000..5e819e959
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1 @@
+export * from './Form'
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 000000000..d633a0ae0
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "vitest",
+      "vite/client"
+    ],
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-slots"
+    ]
+  },
+  "include": [
+    "env.d.ts",
+    "**/*.vue",
+    "**/*.story.vue"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}
diff --git a/packages/ui/uno.config.ts b/packages/ui/uno.config.ts
new file mode 100644
index 000000000..241b30eaa
--- /dev/null
+++ b/packages/ui/uno.config.ts
@@ -0,0 +1,37 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetWebFonts,
+  presetWind3,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetAttributify(),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+      timeouts: {
+        warning: 5000,
+        failure: 10000,
+      },
+    }),
+    presetIcons({
+      scale: 1.2,
+    }),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+  safelist: 'prose prose-sm m-auto text-left'.split(' '),
+})
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
new file mode 100644
index 000000000..3691d3075
--- /dev/null
+++ b/packages/ui/vite.config.ts
@@ -0,0 +1,16 @@
+import { resolve } from 'node:path'
+import Vue from '@vitejs/plugin-vue'
+import Unocss from 'unocss/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    outDir: resolve(import.meta.dirname, 'playground', 'dist'),
+  },
+  plugins: [
+    Vue(),
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    Unocss(),
+  ],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 208f1e2f5..60f07bafe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -236,6 +236,9 @@ importers:
       '@proj-airi/stage-ui':
         specifier: workspace:^
         version: link:../../packages/stage-ui
+      '@proj-airi/ui':
+        specifier: workspace:^
+        version: link:../../packages/ui
       '@ricky0123/vad-web':
         specifier: ^0.0.22
         version: 0.0.22
@@ -525,6 +528,9 @@ importers:
       '@proj-airi/stage-ui':
         specifier: workspace:^
         version: link:../../packages/stage-ui
+      '@proj-airi/ui':
+        specifier: workspace:^
+        version: link:../../packages/ui
       '@proj-airi/ui-transitions':
         specifier: workspace:^
         version: link:../../packages/ui-transitions
@@ -951,6 +957,9 @@ importers:
       '@proj-airi/server-sdk':
         specifier: workspace:^
         version: link:../server-sdk
+      '@proj-airi/ui':
+        specifier: workspace:^
+        version: link:../ui
       '@vueuse/core':
         specifier: ^13.1.0
         version: 13.1.0(vue@3.5.13(typescript@5.8.3))
@@ -1010,6 +1019,28 @@ importers:
         specifier: ^6.3.3
         version: 6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0)
 
+  packages/ui:
+    dependencies:
+      '@proj-airi/stage-ui':
+        specifier: workspace:*
+        version: link:../stage-ui
+      '@vueuse/core':
+        specifier: ^13.1.0
+        version: 13.1.0(vue@3.5.13(typescript@5.8.3))
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.13(typescript@5.8.3)
+    devDependencies:
+      '@unocss/reset':
+        specifier: ^66.1.0-beta.12
+        version: 66.1.0-beta.12
+      '@vitejs/plugin-vue':
+        specifier: ^5.2.3
+        version: 5.2.3(vite@6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3))
+      vue-tsc:
+        specifier: ^3.0.0-alpha.4
+        version: 3.0.0-alpha.4(typescript@5.8.3)
+
   packages/ui-transitions:
     dependencies:
       '@vueuse/core':