diff --git a/alias.ts b/alias.ts
index df85922a..2af88f4e 100644
--- a/alias.ts
+++ b/alias.ts
@@ -20,6 +20,8 @@ export const alias = {
   '@vitejs/devtools/client/inject': r('core/src/client/inject/index.ts'),
   '@vitejs/devtools/client/webcomponents': r('core/src/client/webcomponents/index.ts'),
   '@vitejs/devtools': r('core/src/index.ts'),
+  '@vitejs/devtools-ui/unocss': r('ui/src/unocss/index.ts'),
+  '@vitejs/devtools-ui/components': r('ui/src/components'),
 }
 
 // update tsconfig.base.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 00000000..38ce48a9
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@vitejs/devtools-ui",
+  "type": "module",
+  "version": "0.0.0-alpha.26",
+  "private": true,
+  "description": "DevTools UI for Vite (work in progress)",
+  "author": "VoidZero Inc.",
+  "license": "MIT",
+  "homepage": "https://github.com/vitejs/devtools#readme",
+  "repository": {
+    "directory": "packages/ui",
+    "type": "git",
+    "url": "git+https://github.com/vitejs/devtools.git"
+  },
+  "bugs": "https://github.com/vitejs/devtools/issues",
+  "keywords": [
+    "vite",
+    "devtools",
+    "devtools ui"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./unocss": {
+      "types": "./src/unocss/index.ts",
+      "import": "./src/unocss/index.ts"
+    },
+    "./components/*": {
+      "types": "./src/components/*.vue",
+      "import": "./src/components/*.vue"
+    }
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts"
+}
diff --git a/packages/vite/src/app/components/visual/Loading.vue b/packages/ui/src/components/VisualLoading.vue
similarity index 87%
rename from packages/vite/src/app/components/visual/Loading.vue
rename to packages/ui/src/components/VisualLoading.vue
index 913c0ba6..4e054f5c 100644
--- a/packages/vite/src/app/components/visual/Loading.vue
+++ b/packages/ui/src/components/VisualLoading.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import VisualLogoBanner from './VisualLogoBanner.vue'
+
 const props = defineProps<{
   text?: string
 }>()
diff --git a/packages/vite/src/app/components/visual/Logo.vue b/packages/ui/src/components/VisualLogo.vue
similarity index 100%
rename from packages/vite/src/app/components/visual/Logo.vue
rename to packages/ui/src/components/VisualLogo.vue
diff --git a/packages/vite/src/app/components/visual/LogoBanner.vue b/packages/ui/src/components/VisualLogoBanner.vue
similarity index 89%
rename from packages/vite/src/app/components/visual/LogoBanner.vue
rename to packages/ui/src/components/VisualLogoBanner.vue
index bd5a8ff2..675ca133 100644
--- a/packages/vite/src/app/components/visual/LogoBanner.vue
+++ b/packages/ui/src/components/VisualLogoBanner.vue
@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+import VisualLogo from './VisualLogo.vue'
+</script>
+
 <template>
   <div class="flex gap-2 group" p8 relative>
     <div op10 group-hover="op100" transition duration-800 class="absolute -bottom-[10px] -left-[20px] w-[80px] h-[80px] bg-linear-to-b from-[#61d9ff] to-transparent blur-[30px]" />
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 00000000..d4e1a95f
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1 @@
+export * from './unocss'
diff --git a/packages/ui/src/unocss/index.ts b/packages/ui/src/unocss/index.ts
new file mode 100644
index 00000000..31039fe2
--- /dev/null
+++ b/packages/ui/src/unocss/index.ts
@@ -0,0 +1,50 @@
+import type { WebFontsOptions } from '@unocss/preset-web-fonts'
+import type { Theme } from '@unocss/preset-wind4'
+import {
+  definePreset,
+  mergeDeep,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetWebFonts,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import { shortcuts } from './shortcuts'
+import { theme } from './theme'
+
+export interface PresetDevToolsUIOptions {
+  webFonts?: WebFontsOptions
+}
+
+export const presetDevToolsUI = definePreset<PresetDevToolsUIOptions, Theme>((options) => {
+  return {
+    name: '@vitejs/devtools-ui/preset',
+    shortcuts,
+    extendTheme(defaultTheme) {
+      return mergeDeep(defaultTheme, theme)
+    },
+    presets: [
+      presetWind4(),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+      }),
+      presetTypography(),
+      presetWebFonts(mergeDeep(
+        {
+          fonts: {
+            sans: 'DM Sans:200,400,700',
+            mono: 'DM Mono',
+          },
+        },
+        options?.webFonts ?? {},
+      )),
+    ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
+  }
+})
diff --git a/packages/ui/src/unocss/shortcuts.ts b/packages/ui/src/unocss/shortcuts.ts
new file mode 100644
index 00000000..d2f9a83e
--- /dev/null
+++ b/packages/ui/src/unocss/shortcuts.ts
@@ -0,0 +1,62 @@
+import type { UserShortcuts } from '@unocss/core'
+import type { Theme } from '@unocss/preset-wind4'
+
+export const shortcuts: UserShortcuts<Theme> = [
+  {
+    'color-base': 'color-neutral-800 dark:color-neutral-300',
+    'bg-base': 'bg-white dark:bg-#111',
+    'bg-secondary': 'bg-#eee dark:bg-#222',
+    'border-base': 'border-#8884',
+
+    'border-flow': 'border-#8885',
+    'border-flow-line': 'border-#ccc dark:border-#222',
+    'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50',
+    'border-flow-line-active': 'border-primary-700/30 dark:border-primary-300/30',
+
+    'fg-flow-line': 'color-#ccc dark:color-#222',
+    'fg-flow-line-active': 'color-primary-700/30 dark:color-primary-300/30',
+
+    'bg-tooltip': 'bg-white:75 dark:bg-#111:75 backdrop-blur-8',
+    'bg-code': 'bg-gray-500:5',
+
+    'bg-gradient-more': 'bg-gradient-to-t from-white via-white:80 to-white:0 dark:from-#111 dark:via-#111:80 dark:to-#111:0',
+
+    'color-active': 'color-primary-600 dark:color-primary-300',
+    'border-active': 'border-primary-600/25 dark:border-primary-400/25',
+    'bg-active': 'bg-#8881',
+
+    'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
+    'btn-action-sm': 'btn-action text-sm',
+    'btn-action-active': 'color-active border-active! bg-active op100!',
+
+    'icon-catppuccin': 'light:filter-invert-100 light:filter-hue-rotate-180 light:filter-brightness-80',
+
+    'z-flowmap-line': 'z--1',
+    'z-graph-bg': 'z-5',
+    'z-graph-link': 'z-10',
+    'z-graph-node': 'z-11',
+    'z-graph-link-active': 'z-12',
+    'z-graph-node-active': 'z-13',
+
+    'z-panel-no-mobile': 'z-55',
+    'z-panel-nav': 'z-60',
+    'z-panel-content': 'z-65',
+    'z-panel-goto': 'z-70',
+    'z-panel-terminal': 'z-80',
+
+    'op-fade': 'op65 dark:op55',
+    'op-mute': 'op30 dark:op25',
+    'color-deprecated': 'text-op85 text-[#b71c1c] dark:text-[#f87171]',
+
+    'color-scale-neutral': 'text-gray-700:75 dark:text-gray-300:75!',
+    'color-scale-low': 'text-lime-700:75 dark:text-lime-300:75! dark:saturate-50',
+    'color-scale-medium': 'text-amber-700:85 dark:text-amber-300:85! dark:saturate-80',
+    'color-scale-high': 'text-orange-700:95 dark:text-orange-300:95!',
+    'color-scale-critical': 'text-red-700:95 dark:text-red-300:95!',
+
+    'page-padding': 'pt-24 pl-112 pr-8 pb-8',
+    'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8',
+  },
+  [/^badge-color-(\w+)$/, ([, color]) => `bg-${color}-400:20 dark:bg-${color}-400:10 text-${color}-700 dark:text-${color}-300 border-${color}-600:10 dark:border-${color}-300:10`],
+  [/^bg-glass(:\d+)?$/, ([, opacity = ':75']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`],
+]
diff --git a/packages/ui/src/unocss/theme.ts b/packages/ui/src/unocss/theme.ts
new file mode 100644
index 00000000..8555ece4
--- /dev/null
+++ b/packages/ui/src/unocss/theme.ts
@@ -0,0 +1,20 @@
+import type { Theme } from '@unocss/preset-wind4'
+
+export const theme: Theme = {
+  colors: {
+    primary: {
+      50: '#fcf4ff',
+      100: '#f7e5ff',
+      200: '#f0d0ff',
+      300: '#e5acff',
+      400: '#d577ff',
+      DEFAULT: '#d577ff',
+      500: '#c543ff',
+      600: '#bd34fe',
+      700: '#9f0fe1',
+      800: '#8512b7',
+      900: '#6d1093',
+      950: '#4d006e',
+    },
+  },
+}
diff --git a/packages/vite/package.json b/packages/vite/package.json
index 4e49f625..4a8600e7 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -39,6 +39,7 @@
     "@rolldown/debug": "catalog:deps",
     "@vitejs/devtools-kit": "workspace:*",
     "@vitejs/devtools-rpc": "workspace:*",
+    "@vitejs/devtools-ui": "workspace:*",
     "ansis": "catalog:deps",
     "birpc": "catalog:deps",
     "cac": "catalog:deps",
diff --git a/packages/vite/src/app/app.vue b/packages/vite/src/app/app.vue
index 04fe89fb..f2a38fc0 100644
--- a/packages/vite/src/app/app.vue
+++ b/packages/vite/src/app/app.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '#app/composables/head'
 
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { connect, connectionState } from './composables/rpc'
 import 'floating-vue/dist/style.css'
 import './styles/cm.css'
diff --git a/packages/vite/src/app/components/data/ChunkDetails.vue b/packages/vite/src/app/components/data/ChunkDetails.vue
index 216af473..e7d2907e 100644
--- a/packages/vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/vite/src/app/components/data/ChunkDetails.vue
@@ -2,6 +2,7 @@
 import type { RolldownChunkImport, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
diff --git a/packages/vite/src/app/components/data/ChunkDetailsLoader.vue b/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
index e3820412..94418f20 100644
--- a/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{
diff --git a/packages/vite/src/app/components/data/ModuleDetailsLoader.vue b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
index 89eb4d65..73e36a71 100644
--- a/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedAsync } from '@vueuse/core'
 import { nextTick, ref, watchEffect } from 'vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/vite/src/app/components/data/PackageDetailsLoader.vue b/packages/vite/src/app/components/data/PackageDetailsLoader.vue
index 800445c5..6152dbba 100644
--- a/packages/vite/src/app/components/data/PackageDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/PackageDetailsLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
diff --git a/packages/vite/src/app/components/data/PluginDetailsLoader.vue b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
index e5667370..a64f2430 100644
--- a/packages/vite/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
@@ -4,6 +4,7 @@ import type { PluginBuildInfo, SessionContext } from '~~/shared/types'
 import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState, useMouse } from '@vueuse/core'
 import { normalizeTreeNode, Sunburst } from 'nanovis'
 import { computed, reactive, watch } from 'vue'
diff --git a/packages/vite/src/app/pages/compare/[sessions]/index.vue b/packages/vite/src/app/pages/compare/[sessions]/index.vue
index 0dee7855..9166f4b0 100644
--- a/packages/vite/src/app/pages/compare/[sessions]/index.vue
+++ b/packages/vite/src/app/pages/compare/[sessions]/index.vue
@@ -2,6 +2,7 @@
 import type { SessionCompareContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computed, onMounted, ref } from 'vue'
 
 const isLoading = ref(false)
diff --git a/packages/vite/src/app/pages/index.vue b/packages/vite/src/app/pages/index.vue
index 3f0398a4..7ace42e1 100644
--- a/packages/vite/src/app/pages/index.vue
+++ b/packages/vite/src/app/pages/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { BuildInfo } from '~~/node/rolldown/logs-manager'
 import { useRpc } from '#imports'
+import VisualLogoBanner from '@vitejs/devtools-ui/components/VisualLogoBanner.vue'
 import { computed, ref } from 'vue'
 
 const sessionMode = ref<'list' | 'compare'>('list')
diff --git a/packages/vite/src/app/pages/session/[session].vue b/packages/vite/src/app/pages/session/[session].vue
index bfbb57cd..def1ddba 100644
--- a/packages/vite/src/app/pages/session/[session].vue
+++ b/packages/vite/src/app/pages/session/[session].vue
@@ -2,6 +2,7 @@
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { onKeyDown } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
 import { useSideNav } from '~/state/nav'
diff --git a/packages/vite/src/app/pages/session/[session]/assets.vue b/packages/vite/src/app/pages/session/[session]/assets.vue
index 76d5f01b..ac378ee1 100644
--- a/packages/vite/src/app/pages/session/[session]/assets.vue
+++ b/packages/vite/src/app/pages/session/[session]/assets.vue
@@ -4,6 +4,7 @@ import type { ClientSettings } from '~/state/settings'
 import type { AssetChartInfo, AssetChartNode } from '~/types/chart'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Flamegraph, Sunburst, Treemap } from 'nanovis'
diff --git a/packages/vite/src/app/pages/session/[session]/chunks.vue b/packages/vite/src/app/pages/session/[session]/chunks.vue
index ef225103..2d0a06ce 100644
--- a/packages/vite/src/app/pages/session/[session]/chunks.vue
+++ b/packages/vite/src/app/pages/session/[session]/chunks.vue
@@ -3,6 +3,7 @@ import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ClientSettings } from '~/state/settings'
 import type { ChunkChartInfo, ChunkChartNode } from '~/types/chart'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Flamegraph, Sunburst, Treemap } from 'nanovis'
diff --git a/packages/vite/src/app/pages/session/[session]/packages.vue b/packages/vite/src/app/pages/session/[session]/packages.vue
index 9e3539ed..7a660c4c 100644
--- a/packages/vite/src/app/pages/session/[session]/packages.vue
+++ b/packages/vite/src/app/pages/session/[session]/packages.vue
@@ -4,6 +4,7 @@ import type { ClientSettings } from '~/state/settings'
 import type { PackageChartInfo, PackageChartNode } from '~/types/chart'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Treemap } from 'nanovis'
diff --git a/packages/vite/src/app/pages/session/[session]/raw.vue b/packages/vite/src/app/pages/session/[session]/raw.vue
index 58b428b4..2a8745ec 100644
--- a/packages/vite/src/app/pages/session/[session]/raw.vue
+++ b/packages/vite/src/app/pages/session/[session]/raw.vue
@@ -2,6 +2,7 @@
 import type { SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{
diff --git a/packages/vite/src/uno.config.ts b/packages/vite/src/uno.config.ts
index d79e7f6e..55ffe560 100644
--- a/packages/vite/src/uno.config.ts
+++ b/packages/vite/src/uno.config.ts
@@ -1,116 +1,18 @@
 import { fileURLToPath } from 'node:url'
 import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
-import {
-  defineConfig,
-  presetAttributify,
-  presetIcons,
-  presetTypography,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { presetDevToolsUI } from '@vitejs/devtools-ui/unocss'
+import { defineConfig } from 'unocss'
 
 export default defineConfig({
-  shortcuts: [
-    {
-      'color-base': 'color-neutral-800 dark:color-neutral-300',
-      'bg-base': 'bg-white dark:bg-#111',
-      'bg-secondary': 'bg-#eee dark:bg-#222',
-      'border-base': 'border-#8884',
-
-      'border-flow': 'border-#8885',
-      'border-flow-line': 'border-#ccc dark:border-#222',
-      'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50',
-      'border-flow-line-active': 'border-primary-700/30 dark:border-primary-300/30',
-
-      'fg-flow-line': 'color-#ccc dark:color-#222',
-      'fg-flow-line-active': 'color-primary-700/30 dark:color-primary-300/30',
-
-      'bg-tooltip': 'bg-white:75 dark:bg-#111:75 backdrop-blur-8',
-      'bg-code': 'bg-gray-500:5',
-
-      'bg-gradient-more': 'bg-gradient-to-t from-white via-white:80 to-white:0 dark:from-#111 dark:via-#111:80 dark:to-#111:0',
-
-      'color-active': 'color-primary-600 dark:color-primary-300',
-      'border-active': 'border-primary-600/25 dark:border-primary-400/25',
-      'bg-active': 'bg-#8881',
-
-      'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
-      'btn-action-sm': 'btn-action text-sm',
-      'btn-action-active': 'color-active border-active! bg-active op100!',
-
-      'icon-catppuccin': 'light:filter-invert-100 light:filter-hue-rotate-180 light:filter-brightness-80',
-
-      'z-flowmap-line': 'z--1',
-      'z-graph-bg': 'z-5',
-      'z-graph-link': 'z-10',
-      'z-graph-node': 'z-11',
-      'z-graph-link-active': 'z-12',
-      'z-graph-node-active': 'z-13',
-
-      'z-panel-no-mobile': 'z-55',
-      'z-panel-nav': 'z-60',
-      'z-panel-content': 'z-65',
-      'z-panel-goto': 'z-70',
-      'z-panel-terminal': 'z-80',
-
-      'op-fade': 'op65 dark:op55',
-      'op-mute': 'op30 dark:op25',
-      'color-deprecated': 'text-op85 text-[#b71c1c] dark:text-[#f87171]',
-
-      'color-scale-neutral': 'text-gray-700:75 dark:text-gray-300:75!',
-      'color-scale-low': 'text-lime-700:75 dark:text-lime-300:75! dark:saturate-50',
-      'color-scale-medium': 'text-amber-700:85 dark:text-amber-300:85! dark:saturate-80',
-      'color-scale-high': 'text-orange-700:95 dark:text-orange-300:95!',
-      'color-scale-critical': 'text-red-700:95 dark:text-red-300:95!',
-
-      'page-padding': 'pt-24 pl-112 pr-8 pb-8',
-      'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8',
-    },
-    [/^badge-color-(\w+)$/, ([, color]) => `bg-${color}-400:20 dark:bg-${color}-400:10 text-${color}-700 dark:text-${color}-300 border-${color}-600:10 dark:border-${color}-300:10`],
-    [/^bg-glass(:\d+)?$/, ([, opacity = ':75']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`],
-  ],
-  theme: {
-    colors: {
-      primary: {
-        50: '#fcf4ff',
-        100: '#f7e5ff',
-        200: '#f0d0ff',
-        300: '#e5acff',
-        400: '#d577ff',
-        DEFAULT: '#d577ff',
-        500: '#c543ff',
-        600: '#bd34fe',
-        700: '#9f0fe1',
-        800: '#8512b7',
-        900: '#6d1093',
-        950: '#4d006e',
-      },
-    },
-  },
   presets: [
-    presetWind4({
 
-    }),
-    presetAttributify(),
-    presetIcons({
-      scale: 1.2,
-    }),
-    presetTypography(),
-    presetWebFonts({
-      fonts: {
-        sans: 'DM Sans:200,400,700',
-        mono: 'DM Mono',
+    presetDevToolsUI({
+      webFonts: {
+        processors: createLocalFontProcessor({
+          fontAssetsDir: fileURLToPath(new URL('./app/public/fonts', import.meta.url)),
+          fontServeBaseUrl: './fonts',
+        }),
       },
-      processors: createLocalFontProcessor({
-        fontAssetsDir: fileURLToPath(new URL('./app/public/fonts', import.meta.url)),
-        fontServeBaseUrl: './fonts',
-      }),
     }),
   ],
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5a124d4..5236c020 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -672,6 +672,8 @@ importers:
         specifier: catalog:deps
         version: 8.19.0
 
+  packages/ui: {}
+
   packages/vite:
     dependencies:
       '@floating-ui/dom':
@@ -689,6 +691,9 @@ importers:
       '@vitejs/devtools-rpc':
         specifier: workspace:*
         version: link:../rpc
+      '@vitejs/devtools-ui':
+        specifier: workspace:*
+        version: link:../ui
       ansis:
         specifier: catalog:deps
         version: 4.2.0
@@ -10359,7 +10364,7 @@ snapshots:
       '@babel/types': 7.28.5
       '@vue/babel-helper-vue-transform-on': 2.0.1
       '@vue/babel-plugin-resolve-type': 2.0.1(@babel/core@7.28.5)
-      '@vue/shared': 3.5.26
+      '@vue/shared': 3.5.27
     optionalDependencies:
       '@babel/core': 7.28.5
     transitivePeerDependencies:
@@ -10372,7 +10377,7 @@ snapshots:
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/parser': 7.28.5
-      '@vue/compiler-sfc': 3.5.26
+      '@vue/compiler-sfc': 3.5.27
     transitivePeerDependencies:
       - supports-color
 
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 2e89c24c..44309364 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -50,6 +50,12 @@
       ],
       "@vitejs/devtools": [
         "./packages/core/src/index.ts"
+      ],
+      "@vitejs/devtools-ui/unocss": [
+        "./packages/ui/src/unocss/index.ts"
+      ],
+      "@vitejs/devtools-ui/components": [
+        "./packages/ui/src/components"
       ]
     },
     "resolveJsonModule": true,