diff --git a/packages/ui/src/components/ModeSelector.svelte b/packages/ui/src/components/ModeSelector.svelte
index de7d702385d..ee530c03f53 100644
--- a/packages/ui/src/components/ModeSelector.svelte
+++ b/packages/ui/src/components/ModeSelector.svelte
@@ -1,8 +1,8 @@
-<script lang="ts">
+<script lang="ts" generics="T extends string">
   import TabList from './TabList.svelte'
   import { IModeSelector } from '../utils'
 
-  export let props: IModeSelector
+  export let props: IModeSelector<T>
 
   $: modeList = props.config.map((c) => {
     return {
diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
index 2bd2495423d..c5793d9105c 100644
--- a/packages/ui/src/utils.ts
+++ b/packages/ui/src/utils.ts
@@ -206,9 +206,9 @@ export function parseURL (text: string): string {
 /**
  * @public
  */
-export interface IModeSelector {
-  mode: string
-  config: Array<[string, IntlString, object]>
+export interface IModeSelector<Mode extends string = string> {
+  mode: Mode
+  config: Array<[Mode, IntlString, object]>
   onChange: (_mode: string) => void
 }
 
diff --git a/plugins/workbench-resources/src/components/SpecialView.svelte b/plugins/workbench-resources/src/components/SpecialView.svelte
index 1f39a6bafc9..0296f386d8a 100644
--- a/plugins/workbench-resources/src/components/SpecialView.svelte
+++ b/plugins/workbench-resources/src/components/SpecialView.svelte
@@ -40,7 +40,7 @@
   export let isCreationDisabled = false
   export let descriptors: Array<Ref<ViewletDescriptor>> | undefined = undefined
   export let baseQuery: DocumentQuery<Doc> | undefined = undefined
-  export let modes: IModeSelector | undefined = undefined
+  export let modes: IModeSelector<any> | undefined = undefined
 
   let search = ''
   let viewlet: WithLookup<Viewlet> | undefined