diff --git a/ui/prototype/package-lock.json b/ui/prototype/package-lock.json
index 6b2a62cf95..1c47cdce7e 100644
--- a/ui/prototype/package-lock.json
+++ b/ui/prototype/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/vite": "4.2.2",
         "@vitejs/plugin-vue": "^6.0.5",
+        "tailwind-merge": "^3.5.0",
         "tailwindcss": "4.2.2",
         "typescript": "^5.9.3",
         "vite": "^8.0.0",
@@ -1306,6 +1307,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
diff --git a/ui/prototype/package.json b/ui/prototype/package.json
index d456e72160..b16d11d70d 100644
--- a/ui/prototype/package.json
+++ b/ui/prototype/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/vite": "4.2.2",
     "@vitejs/plugin-vue": "^6.0.5",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "4.2.2",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
diff --git a/ui/prototype/scripts/check-prototype.mjs b/ui/prototype/scripts/check-prototype.mjs
index c6c9616a42..8c61b7ea56 100644
--- a/ui/prototype/scripts/check-prototype.mjs
+++ b/ui/prototype/scripts/check-prototype.mjs
@@ -4,10 +4,6 @@ import { join, relative } from 'node:path'
 const root = new URL('..', import.meta.url).pathname
 const srcRoot = join(root, 'src')
 
-function read(path) {
-  return readFileSync(join(root, path), 'utf8')
-}
-
 function walk(dir) {
   return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
     const path = join(dir, entry.name)
@@ -19,40 +15,6 @@ function walk(dir) {
 
 const failures = []
 const sourceFiles = walk(srcRoot).filter((path) => /\.(ts|vue|css)$/.test(path))
-const prototypeBlockItem = read('src/components/editor/UIBlockItem.vue')
-const prototypeBlockItemTitle = read('src/components/editor/UIBlockItemTitle.vue')
-const prototypeEditorSpriteItem = read('src/components/editor/UIEditorSpriteItem.vue')
-const prototypeSpriteItem = read('src/components/editor/SpriteItem.vue')
-
-if (
-  prototypeBlockItem.includes('<button') ||
-  !prototypeBlockItem.includes('<div') ||
-  !prototypeBlockItem.includes('.ui-block-item-active::before') ||
-  !prototypeBlockItem.includes('border-width: 2px;')
-) {
-  failures.push('prototype UIBlockItem must mirror the real block item root and keep a 2px active pseudo-border')
-}
-
-if (
-  !prototypeSpriteItem.includes("import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'") ||
-  !prototypeSpriteItem.includes('<UIEditorSpriteItem') ||
-  prototypeSpriteItem.includes("import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'")
-) {
-  failures.push('prototype SpriteItem must reuse UIEditorSpriteItem instead of duplicating title and hidden icon layout')
-}
-
-if (
-  !prototypeBlockItemTitle.includes('w-full') ||
-  !prototypeBlockItemTitle.includes('px-1.5') ||
-  !prototypeEditorSpriteItem.includes('<UIBlockItemTitle class="gap-0.5 px-1"') ||
-  prototypeEditorSpriteItem.includes('w-[76px]') ||
-  prototypeEditorSpriteItem.includes('width: 76px') ||
-  prototypeEditorSpriteItem.includes('width: calc(100% - 8px)') ||
-  prototypeEditorSpriteItem.includes('px-0') ||
-  prototypeEditorSpriteItem.includes('title="Invisible"')
-) {
-  failures.push('prototype UIEditorSpriteItem title row must use width 100% with 4px padding and no hidden-icon tooltip override')
-}
 
 for (const file of sourceFiles) {
   const text = readFileSync(file, 'utf8')
diff --git a/ui/prototype/src/components/editor/AnimationItem.vue b/ui/prototype/src/components/editor/AnimationItem.vue
index 52b98fbf50..12abef3655 100644
--- a/ui/prototype/src/components/editor/AnimationItem.vue
+++ b/ui/prototype/src/components/editor/AnimationItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'
+import UIEditorSpriteItem from '@/components/ui/block-items/UIEditorSpriteItem.vue'
 
 defineProps<{
   animation: {
diff --git a/ui/prototype/src/components/editor/CostumeItem.vue b/ui/prototype/src/components/editor/CostumeItem.vue
index 8ab1e2a11a..2a948704d3 100644
--- a/ui/prototype/src/components/editor/CostumeItem.vue
+++ b/ui/prototype/src/components/editor/CostumeItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'
+import UIEditorSpriteItem from '@/components/ui/block-items/UIEditorSpriteItem.vue'
 
 defineProps<{
   costume: {
diff --git a/ui/prototype/src/components/editor/SpriteItem.vue b/ui/prototype/src/components/editor/SpriteItem.vue
index ba5786a731..af929639bc 100644
--- a/ui/prototype/src/components/editor/SpriteItem.vue
+++ b/ui/prototype/src/components/editor/SpriteItem.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import UIEditorSpriteItem from '@/components/editor/UIEditorSpriteItem.vue'
+import UIEditorSpriteItem from '@/components/ui/block-items/UIEditorSpriteItem.vue'
 
 defineProps<{
   sprite: {
     name: string
-    shortName: string
     image: string
     hidden: boolean
   }
@@ -17,7 +16,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <UIEditorSpriteItem :name="sprite.shortName" :title="sprite.name" :selected="active" :visible="!sprite.hidden" @click="emit('select')">
+  <UIEditorSpriteItem :name="sprite.name" :selected="active" :visible="!sprite.hidden" @click="emit('select')">
     <template #img="{ style }">
       <img :src="sprite.image" :alt="sprite.name" :style="style" />
     </template>
diff --git a/ui/prototype/src/components/ui/UITab.vue b/ui/prototype/src/components/ui/UITab.vue
index 988f4e6baf..1c31a459c4 100644
--- a/ui/prototype/src/components/ui/UITab.vue
+++ b/ui/prototype/src/components/ui/UITab.vue
@@ -2,11 +2,12 @@
 import { computed } from 'vue'
 
 import { useUITabsCtx } from './UITabs.vue'
+import { cn, type ClassValue } from './utils'
 
 const props = withDefaults(
   defineProps<{
     value: string
-    class?: string
+    class?: ClassValue
   }>(),
   {
     class: ''
@@ -15,15 +16,18 @@ const props = withDefaults(
 
 const tabsCtx = useUITabsCtx()
 const active = computed(() => tabsCtx.value.value === props.value)
+const rootClass = computed(() =>
+  cn(
+    'tab flex h-full min-w-0 cursor-pointer items-center overflow-hidden border-b-2 px-md text-xl/8 whitespace-nowrap transition-[color,border-color] duration-200',
+    active.value ? 'border-grey-1000 text-grey-1000' : 'border-transparent text-grey-800 hover:text-grey-1000',
+    props.class
+  )
+)
 </script>
 
 <template>
   <li
-    class="tab flex h-full min-w-0 cursor-pointer items-center overflow-hidden border-b-2 px-md text-xl/8 whitespace-nowrap transition-[color,border-color] duration-200"
-    :class="[
-      active ? 'border-grey-1000 text-grey-1000' : 'border-transparent text-grey-800 hover:text-grey-1000',
-      props.class
-    ]"
+    :class="rootClass"
     @click="tabsCtx.setValue(props.value)"
   >
     <slot />
diff --git a/ui/prototype/src/components/ui/UITabs.vue b/ui/prototype/src/components/ui/UITabs.vue
index ec1d1a54c6..b712739f62 100644
--- a/ui/prototype/src/components/ui/UITabs.vue
+++ b/ui/prototype/src/components/ui/UITabs.vue
@@ -18,10 +18,12 @@ export function useUITabsCtx() {
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 
+import { cn, type ClassValue } from './utils'
+
 const props = withDefaults(
   defineProps<{
     value: string
-    class?: string
+    class?: ClassValue
   }>(),
   {
     class: ''
@@ -38,10 +40,12 @@ provide(prototypeTabsCtxKey, {
     emit('update:value', value)
   }
 })
+
+const rootClass = computed(() => cn('m-0 flex min-w-0 list-none overflow-hidden px-2', props.class))
 </script>
 
 <template>
-  <ul class="m-0 flex min-w-0 list-none overflow-hidden px-2" :class="props.class">
+  <ul :class="rootClass">
     <slot />
   </ul>
 </template>
diff --git a/ui/prototype/src/components/editor/UIBlockItem.vue b/ui/prototype/src/components/ui/block-items/UIBlockItem.vue
similarity index 100%
rename from ui/prototype/src/components/editor/UIBlockItem.vue
rename to ui/prototype/src/components/ui/block-items/UIBlockItem.vue
diff --git a/ui/prototype/src/components/editor/UIBlockItemTitle.vue b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
similarity index 58%
rename from ui/prototype/src/components/editor/UIBlockItemTitle.vue
rename to ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
index 3ec5b192b9..316c068760 100644
--- a/ui/prototype/src/components/editor/UIBlockItemTitle.vue
+++ b/ui/prototype/src/components/ui/block-items/UIBlockItemTitle.vue
@@ -1,25 +1,31 @@
+<template>
+  <div :class="rootClass">
+    <span class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap" :title="title">
+      <slot></slot>
+    </span>
+    <slot v-if="slots.suffix != null" name="suffix"></slot>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 
+import { cn, type ClassValue } from '../utils'
+
 const props = defineProps<{
   size: 'medium' | 'large'
   title: string
-  class?: string
+  class?: ClassValue
 }>()
 
 const slots = useSlots()
-const rootClass = computed(() => [
-  'flex w-full items-center gap-2 px-1.5 text-center text-title',
-  props.size === 'large' ? 'h-5 text-sm' : 'h-5.5 text-2xs',
-  props.class
-])
+const rootClass = computed(() =>
+  cn(
+    'flex items-center text-title',
+    props.size === 'large'
+      ? 'h-5 w-full gap-2 px-1.5 text-center text-sm'
+      : 'h-5.5 w-full gap-0.5 px-1 text-center text-2xs',
+    props.class
+  )
+)
 </script>
-
-<template>
-  <div :class="rootClass">
-    <span class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap" :title="title">
-      <slot></slot>
-    </span>
-    <slot v-if="slots.suffix != null" name="suffix"></slot>
-  </div>
-</template>
diff --git a/ui/prototype/src/components/ui/block-items/UIEditorBackdropItem.vue b/ui/prototype/src/components/ui/block-items/UIEditorBackdropItem.vue
new file mode 100644
index 0000000000..b841f25913
--- /dev/null
+++ b/ui/prototype/src/components/ui/block-items/UIEditorBackdropItem.vue
@@ -0,0 +1,22 @@
+<template>
+  <UIBlockItem :active="selected">
+    <div class="mt-0.5 flex min-h-0 w-full flex-col items-center">
+      <img class="h-15 w-20 rounded-[4px] object-cover" :src="imgSrc" :alt="name" />
+    </div>
+    <UIBlockItemTitle size="medium" :title="name">
+      {{ name }}
+    </UIBlockItemTitle>
+    <slot></slot>
+  </UIBlockItem>
+</template>
+
+<script setup lang="ts">
+import UIBlockItem from '@/components/ui/block-items/UIBlockItem.vue'
+import UIBlockItemTitle from '@/components/ui/block-items/UIBlockItemTitle.vue'
+
+defineProps<{
+  imgSrc: string
+  name: string
+  selected?: boolean
+}>()
+</script>
diff --git a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
similarity index 53%
rename from ui/prototype/src/components/editor/UIEditorSpriteItem.vue
rename to ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
index e6d88ade32..aae854b85e 100644
--- a/ui/prototype/src/components/editor/UIEditorSpriteItem.vue
+++ b/ui/prototype/src/components/ui/block-items/UIEditorSpriteItem.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
-import eyeOffIcon from '@/assets/editor/ui-icons/eye-off.svg?raw'
-import UIBlockItem from '@/components/editor/UIBlockItem.vue'
-import UIBlockItemTitle from '@/components/editor/UIBlockItemTitle.vue'
+import UIBlockItem from '@/components/ui/block-items/UIBlockItem.vue'
+import UIBlockItemTitle from '@/components/ui/block-items/UIBlockItemTitle.vue'
+import UIIcon from '@/components/ui/icons/UIIcon.vue'
 
-defineProps<{
-  name: string
-  title?: string
-  selected?: boolean
-  visible?: boolean
-}>()
+withDefaults(
+  defineProps<{
+    name: string
+    title?: string
+    selected?: boolean
+    visible?: boolean | null
+  }>(),
+  {
+    visible: null
+  }
+)
 
 const imgStyle: CSSProperties = {
   width: '60px',
@@ -23,15 +28,16 @@ const imgStyle: CSSProperties = {
   <UIBlockItem :active="selected">
     <slot name="img" :style="imgStyle"></slot>
 
-    <UIBlockItemTitle class="gap-0.5 px-1" size="medium" :title="title ?? name">
+    <UIBlockItemTitle size="medium" :title="title ?? name">
       {{ name }}
       <template v-if="visible === false" #suffix>
-        <span
+        <UIIcon
           class="size-3.5 flex-none cursor-auto text-grey-700"
+          type="eyeOff"
           role="img"
           aria-label="Invisible"
-          v-html="eyeOffIcon"
-        ></span>
+          title="Invisible"
+        />
       </template>
     </UIBlockItemTitle>
     <slot></slot>
diff --git a/ui/prototype/src/components/ui/icons/UIIcon.vue b/ui/prototype/src/components/ui/icons/UIIcon.vue
new file mode 100644
index 0000000000..1e526924f3
--- /dev/null
+++ b/ui/prototype/src/components/ui/icons/UIIcon.vue
@@ -0,0 +1,31 @@
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div :class="rootClass" :data-icon-type="type" v-html="typeIconMap[type]"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { cn, type ClassValue } from '../utils'
+import eyeOff from './eye-off.svg?raw'
+
+const typeIconMap = {
+  eyeOff
+}
+
+export type Type = keyof typeof typeIconMap
+
+const props = defineProps<{
+  type: Type
+  class?: ClassValue
+}>()
+
+const rootClass = computed(() => cn('ui-icon flex h-4 w-4', props.class))
+</script>
+
+<style scoped>
+.ui-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/ui/prototype/src/components/ui/icons/eye-off.svg b/ui/prototype/src/components/ui/icons/eye-off.svg
new file mode 100644
index 0000000000..ba66fe0d89
--- /dev/null
+++ b/ui/prototype/src/components/ui/icons/eye-off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1133 7.53809C20.3684 7.04844 20.9721 6.85833 21.4619 7.11328C21.9514 7.36845 22.1416 7.97222 21.8867 8.46191C21.4958 9.2128 20.9197 9.87987 20.2227 10.4512C20.1572 10.5049 20.0874 10.5542 20.0195 10.6064L22.2109 12.7979C22.6012 13.1884 22.6013 13.8214 22.2109 14.2119C21.8205 14.6024 21.1874 14.6022 20.7969 14.2119L18.2607 11.6758C17.4741 12.0514 16.6054 12.3553 15.6777 12.5762L16.4893 15.6045C16.6321 16.1378 16.3155 16.687 15.7822 16.8301C15.2489 16.9729 14.7006 16.6554 14.5576 16.1221L13.6973 12.9111C13.1429 12.9684 12.5758 13 12 13C11.4202 13 10.849 12.9682 10.291 12.9102L9.43066 16.123C9.28756 16.6561 8.73922 16.9727 8.20605 16.8301C7.67259 16.6871 7.35609 16.138 7.49902 15.6045L8.31055 12.5732C7.38809 12.3528 6.52399 12.0504 5.74121 11.6768L3.20703 14.2119C2.81658 14.6024 2.18351 14.6022 1.79297 14.2119C1.40261 13.8214 1.4025 13.1883 1.79297 12.7979L3.98145 10.6084C3.913 10.5558 3.84336 10.5053 3.77734 10.4512C3.08027 9.87988 2.50423 9.21275 2.11328 8.46191C1.85831 7.97211 2.04839 7.36837 2.53809 7.11328C3.02785 6.85847 3.63166 7.04846 3.88672 7.53809C4.13045 8.00621 4.51604 8.47083 5.04492 8.9043C6.54375 10.1326 9.06065 11 12 11C14.9394 10.9999 17.4564 10.1326 18.9551 8.9043C19.484 8.47078 19.8696 8.00621 20.1133 7.53809Z" fill="currentColor"/>
+</svg>
diff --git a/ui/prototype/src/components/ui/utils/cn.ts b/ui/prototype/src/components/ui/utils/cn.ts
new file mode 100644
index 0000000000..eda8cbacf0
--- /dev/null
+++ b/ui/prototype/src/components/ui/utils/cn.ts
@@ -0,0 +1,28 @@
+import { twMerge } from 'tailwind-merge'
+
+export type ClassDictionary = Record<string, boolean | null>
+export type ClassValue = string | ClassDictionary | null | undefined | false | ClassValue[]
+
+function flattenClassValue(value: ClassValue, tokens: string[]) {
+  if (value == null || value === false) return
+
+  if (typeof value === 'string') {
+    tokens.push(value)
+    return
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) flattenClassValue(item, tokens)
+    return
+  }
+
+  for (const [className, enabled] of Object.entries(value)) {
+    if (enabled === true) tokens.push(className)
+  }
+}
+
+export function cn(...values: ClassValue[]) {
+  const tokens: string[] = []
+  for (const value of values) flattenClassValue(value, tokens)
+  return twMerge(tokens.join(' '))
+}
diff --git a/ui/prototype/src/components/ui/utils/index.ts b/ui/prototype/src/components/ui/utils/index.ts
new file mode 100644
index 0000000000..c5c1882cfc
--- /dev/null
+++ b/ui/prototype/src/components/ui/utils/index.ts
@@ -0,0 +1 @@
+export * from './cn'
diff --git a/ui/prototype/src/pages/editor/index.vue b/ui/prototype/src/pages/editor/index.vue
index 2e13719f6a..07fb325129 100644
--- a/ui/prototype/src/pages/editor/index.vue
+++ b/ui/prototype/src/pages/editor/index.vue
@@ -15,6 +15,7 @@ import UICardHeader from '@/components/ui/UICardHeader.vue'
 import UITab from '@/components/ui/UITab.vue'
 import UITabs from '@/components/ui/UITabs.vue'
 import UITag from '@/components/ui/UITag.vue'
+import UIEditorBackdropItem from '@/components/ui/block-items/UIEditorBackdropItem.vue'
 import controlIcon from '@/assets/editor/category-icons/control.svg?raw'
 import eventIcon from '@/assets/editor/category-icons/event.svg?raw'
 import gameIcon from '@/assets/editor/category-icons/game.svg?raw'
@@ -89,7 +90,6 @@ const router = useRouter()
 type SpriteCard = {
   id: string
   name: string
-  shortName: string
   image: string
   hidden: boolean
   x: number
@@ -428,7 +428,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'niu-xiao-qi',
     name: '牛小七',
-    shortName: '牛小七',
     image: niuXiaoQiUrl,
     hidden: false,
     x: -224,
@@ -440,7 +439,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'niu-xiao-hua',
     name: '牛小花牛小花牛小花牛小花牛小花牛小花',
-    shortName: '牛小花牛小花...',
     image: niuXiaoHuaUrl,
     hidden: false,
     x: -130,
@@ -452,7 +450,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'flower',
     name: '花朵花朵花朵花朵花朵花朵花朵花朵花朵',
-    shortName: '花朵花...',
     image: flowerUrl,
     hidden: true,
     x: 0,
@@ -464,7 +461,6 @@ const niuRunSprites = ref<SpriteCard[]>([
   {
     id: 'tornado',
     name: '龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风龙卷风',
-    shortName: '龙卷风...',
     image: tornadoUrl,
     hidden: true,
     x: 120,
@@ -540,7 +536,6 @@ const weatherggggSprites = ref<SpriteCard[]>([
   {
     id: 'jaime',
     name: 'Jaime',
-    shortName: 'Jaime',
     image: jaimeUrl,
     hidden: false,
     x: -80,
@@ -552,7 +547,6 @@ const weatherggggSprites = ref<SpriteCard[]>([
   {
     id: 'kai',
     name: 'Kai',
-    shortName: 'Kai',
     image: kaiUrl,
     hidden: false,
     x: 80,
@@ -1434,7 +1428,6 @@ function createSpriteCard(source: string, name: string, image: string): SpriteCa
   const sprite: SpriteCard = {
     id: `${source}-sprite-${Date.now()}`,
     name,
-    shortName: name.length > 10 ? `${name.slice(0, 8)}...` : name,
     image,
     hidden: false,
     x: -224,
@@ -1763,7 +1756,6 @@ function duplicateSprite(sprite: SpriteCard) {
     ...sprite,
     id: `${sprite.id}-copy-${Date.now()}`,
     name: `${sprite.name} ${copyIndex}`,
-    shortName: `${sprite.shortName} ${copyIndex}`,
     hidden: false
   }
   const sourceIndex = sprites.value.findIndex((item) => item.id === sprite.id)
@@ -1810,7 +1802,6 @@ function submitSpriteRename() {
     return
   }
   sprite.name = nextName
-  sprite.shortName = nextName.length > 10 ? `${nextName.slice(0, 8)}...` : nextName
   cancelSpriteRename()
   markPrototypeAction()
 }
@@ -1839,7 +1830,6 @@ function submitMapSpriteRename() {
     return
   }
   sprite.name = nextName
-  sprite.shortName = nextName.length > 10 ? `${nextName.slice(0, 8)}...` : nextName
   cancelMapSpriteRename()
 }
 
@@ -2434,17 +2424,14 @@ onBeforeUnmount(() => {
 
         <div v-else-if="activeStageTab === 'backdrops'" class="asset-editor-body">
           <aside class="asset-editor-list" aria-label="Backdrops list">
-            <button
+            <UIEditorBackdropItem
               v-for="backdrop in backdrops"
               :key="backdrop.id"
-              class="editor-asset-item"
-              :class="{ active: selectedBackdropId === backdrop.id }"
-              type="button"
+              :img-src="backdrop.image"
+              :name="backdrop.name"
+              :selected="selectedBackdropId === backdrop.id"
               @click="selectedBackdropId = backdrop.id"
-            >
-              <img :src="backdrop.image" :alt="backdrop.name" />
-              <span class="asset-item-title">{{ backdrop.name }}</span>
-            </button>
+            ></UIEditorBackdropItem>
             <button class="asset-add-button" type="button" aria-label="Add backdrop">+</button>
           </aside>
           <section class="asset-detail" aria-label="Backdrop detail">