From baa9a39e65c71ead3b0e3c52d318801126a425d7 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Tue, 19 May 2026 12:25:02 -0400
Subject: [PATCH 1/5] Update SearchIcon.tsx

---
 plugins/renamer/src/components/SearchIcon.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/renamer/src/components/SearchIcon.tsx b/plugins/renamer/src/components/SearchIcon.tsx
index 52720f5cf..3b89f25fc 100644
--- a/plugins/renamer/src/components/SearchIcon.tsx
+++ b/plugins/renamer/src/components/SearchIcon.tsx
@@ -1,10 +1,10 @@
 export default function SearchIcon() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="11.384" height="11.134">
+        <svg role="img" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
             <path
-                d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 6.046 9.679 7.017 9.13 7.819 L 11.164 9.854 C 11.457 10.146 11.457 10.621 11.164 10.914 C 10.871 11.207 10.396 11.207 10.104 10.914 L 8.107 8.918 C 7.254 9.595 6.174 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z M 1.5 5 C 1.5 6.933 3.067 8.5 5 8.5 C 6.933 8.5 8.5 6.933 8.5 5 C 8.5 3.067 6.933 1.5 5 1.5 C 3.067 1.5 1.5 3.067 1.5 5 Z"
+                d="M5.299.5a5 5 0 0 1 4.416 7.345.75.75 0 0 0 .127.887l1.621 1.622a.749.749 0 1 1-1.06 1.06L8.851 9.862a.75.75 0 0 0-.925-.107A5.001 5.001 0 1 1 5.299.5m-3.5 5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0"
                 fill="currentColor"
-            ></path>
+            />
         </svg>
     )
 }

From a4509d59c6e201e6ec8ad16ef20a88869cb58e80 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Tue, 19 May 2026 12:45:14 -0400
Subject: [PATCH 2/5] Prerelease tabs style

---
 plugins/renamer/src/App.css             | 44 ++++++++++++++++++++++++-
 plugins/renamer/src/components/Tabs.tsx | 14 +++++++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/plugins/renamer/src/App.css b/plugins/renamer/src/App.css
index 35a373caa..8d52f8ff4 100644
--- a/plugins/renamer/src/App.css
+++ b/plugins/renamer/src/App.css
@@ -116,6 +116,48 @@
     background-color: #555;
 }
 
+/* Prerelease tabs styles */
+.prerelease-tabs {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 15px;
+    position: relative;
+}
+
+.prerelease-tabs-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    width: 100%;
+    padding: 10px 0;
+    border-top: 1px solid var(--framer-color-divider);
+    border-bottom: 1px solid var(--framer-color-divider);
+}
+
+.prerelease-tab {
+    position: relative;
+    border: 0;
+    width: fit-content;
+    height: 30px;
+    color: #999999;
+    background-color: transparent !important;
+    font-weight: 500;
+    user-select: none;
+    padding: 0 11px;
+    transition:
+        color 100ms ease,
+        background-color 100ms ease;
+}
+
+.prerelease-tab.active {
+    color: var(--framer-color-text);
+    background-color: var(--framer-color-bg-tertiary) !important;
+    font-weight: 600;
+}
+
 /* TextField styles */
 .text-field {
     background-color: var(--framer-color-bg-tertiary);
@@ -221,7 +263,7 @@
     inset: 0;
 }
 
-.results-container:before {
+body:not([data-framer-styles="prerelease"]) .results-container:before {
     content: "";
     position: absolute;
     top: 0;
diff --git a/plugins/renamer/src/components/Tabs.tsx b/plugins/renamer/src/components/Tabs.tsx
index 789ed0c55..1625dc9ba 100644
--- a/plugins/renamer/src/components/Tabs.tsx
+++ b/plugins/renamer/src/components/Tabs.tsx
@@ -1,4 +1,5 @@
 import cx from "classnames"
+import { useMemo } from "react"
 
 interface TabItem {
     label: string
@@ -11,9 +12,20 @@ interface Props {
 }
 
 export default function Tabs({ items }: Props) {
+    const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", [])
     const activeIndex = items.findIndex(item => item.active)
 
-    return (
+    return isPrerelease ? (
+        <div className="prerelease-tabs">
+            <div className="prerelease-tabs-container">
+                {items.map((item, index) => (
+                    <button key={index} className={cx("prerelease-tab", item.active && "active")} onClick={item.select}>
+                        {item.label}
+                    </button>
+                ))}
+            </div>
+        </div>
+    ) : (
         <div className="tabs">
             <div className="tabs-container">
                 <div className="tab-bg-container">

From 77e8d0124d0ecdbb2ced562e7e45242581acc34e Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Tue, 19 May 2026 12:54:18 -0400
Subject: [PATCH 3/5] Layer prerelease icons

---
 plugins/renamer/src/App.css                  |   4 +
 plugins/renamer/src/components/LayerIcon.tsx | 167 ++++++++++++++-----
 2 files changed, 126 insertions(+), 45 deletions(-)

diff --git a/plugins/renamer/src/App.css b/plugins/renamer/src/App.css
index 8d52f8ff4..d9f9f8880 100644
--- a/plugins/renamer/src/App.css
+++ b/plugins/renamer/src/App.css
@@ -292,6 +292,10 @@ body:not([data-framer-styles="prerelease"]) .results-container:before {
     padding: 15px;
 }
 
+[data-framer-styles="prerelease"] .container {
+    padding: 10px 15px;
+}
+
 .results-list {
     position: relative;
 }
diff --git a/plugins/renamer/src/components/LayerIcon.tsx b/plugins/renamer/src/components/LayerIcon.tsx
index 746462381..b58d95c08 100644
--- a/plugins/renamer/src/components/LayerIcon.tsx
+++ b/plugins/renamer/src/components/LayerIcon.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react"
 import type { IndexNodeType } from "../search/types"
 
 interface Props {
@@ -5,60 +6,136 @@ interface Props {
 }
 
 export default function LayerIcon({ type }: Props) {
-    const width = 12
-    const height = 12
+    const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", [])
 
     let icon = null
 
-    switch (type) {
-        case "TextNode":
-            icon = (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" className="text-icon">
-                    <path
-                        d="M 5.5 4 L 5.5 8.5 M 2.5 3 L 8.5 3"
-                        fill="transparent"
-                        strokeWidth="2"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                    />
-                </svg>
-            )
-            break
+    if (isPrerelease) {
+        switch (type) {
+            case "TextNode":
+                icon = (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        className="text-icon"
+                    >
+                        <g
+                            fill="transparent"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeMiterlimit="10"
+                            strokeWidth="1.5"
+                        >
+                            <path d="M6.25 2.25V10M2 2.25h8.5" />
+                        </g>
+                    </svg>
+                )
+                break
+            case "FrameNode":
+                icon = (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        className="frame-icon"
+                    >
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.2"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="1.5"
+                            d="M1.25 3.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2Z"
+                        />
+                    </svg>
+                )
+                break
 
-        case "FrameNode":
-            icon = (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" className="frame-icon">
-                    <path
-                        d="M 1 2.5 C 1 1.672 1.672 1 2.5 1 L 8.5 1 C 9.328 1 10 1.672 10 2.5 L 10 8.5 C 10 9.328 9.328 10 8.5 10 L 2.5 10 C 1.672 10 1 9.328 1 8.5 Z"
-                        fill="currentColor"
-                    />
-                </svg>
-            )
-            break
+            case "ComponentInstanceNode":
+                icon = (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        aria-hidden="true"
+                        focusable="false"
+                        className="component-icon"
+                    >
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.2"
+                            stroke="currentColor"
+                            strokeWidth="1.5"
+                            d="M4.586 1.354a2 2 0 0 1 2.828 0l3.232 3.232a2 2 0 0 1 0 2.828l-3.232 3.232a2 2 0 0 1-2.828 0L1.354 7.414a2 2 0 0 1 0-2.828Z"
+                        />
+                        <path fill="none" stroke="currentColor" d="m3 3 6 6M9 3 3 9" />
+                    </svg>
+                )
+                break
 
-        case "ComponentInstanceNode":
-            icon = (
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="11"
-                    height="11"
-                    viewBox="0 0 11 11"
-                    className="component-icon"
-                >
-                    <path
-                        d="M4.44.55a1.5 1.5 0 0 1 2.12 0l1.592 1.591L5.5 4.793 2.848 2.14ZM2.14 8.152.551 6.56a1.5 1.5 0 0 1 0-2.122l1.59-1.59L4.793 5.5Zm8.309-3.713a1.5 1.5 0 0 1 0 2.122L8.859 8.15 6.207 5.5 8.86 2.848Zm-3.89 6.01a1.5 1.5 0 0 1-2.12 0L2.847 8.86 5.5 6.207 8.152 8.86Z"
-                        fill="currentColor"
-                    />
-                </svg>
-            )
-            break
+            default:
+                icon = null
+        }
+    } else {
+        switch (type) {
+            case "TextNode":
+                icon = (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" className="text-icon">
+                        <path
+                            d="M 5.5 4 L 5.5 8.5 M 2.5 3 L 8.5 3"
+                            fill="transparent"
+                            strokeWidth="2"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                        />
+                    </svg>
+                )
+                break
 
-        default:
-            icon = null
+            case "FrameNode":
+                icon = (
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" className="frame-icon">
+                        <path
+                            d="M 1 2.5 C 1 1.672 1.672 1 2.5 1 L 8.5 1 C 9.328 1 10 1.672 10 2.5 L 10 8.5 C 10 9.328 9.328 10 8.5 10 L 2.5 10 C 1.672 10 1 9.328 1 8.5 Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )
+                break
+
+            case "ComponentInstanceNode":
+                icon = (
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="11"
+                        height="11"
+                        viewBox="0 0 11 11"
+                        className="component-icon"
+                    >
+                        <path
+                            d="M4.44.55a1.5 1.5 0 0 1 2.12 0l1.592 1.591L5.5 4.793 2.848 2.14ZM2.14 8.152.551 6.56a1.5 1.5 0 0 1 0-2.122l1.59-1.59L4.793 5.5Zm8.309-3.713a1.5 1.5 0 0 1 0 2.122L8.859 8.15 6.207 5.5 8.86 2.848Zm-3.89 6.01a1.5 1.5 0 0 1-2.12 0L2.847 8.86 5.5 6.207 8.152 8.86Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )
+                break
+
+            default:
+                icon = null
+        }
     }
 
     return (
-        <div className="icon" style={{ width, height }}>
+        <div className="icon" style={{ width: 12, height: 12 }}>
             {icon}
         </div>
     )

From 0556dba84a62e5cdea9bdea0f5b4fba5a04b212d Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Tue, 19 May 2026 13:04:27 -0400
Subject: [PATCH 4/5] Breakpoint icon

---
 plugins/renamer/src/App.css                  |  2 +
 plugins/renamer/src/components/LayerIcon.tsx | 75 +++++++++++++++++---
 plugins/renamer/src/components/Results.tsx   |  2 +-
 plugins/renamer/src/search/indexer.ts        |  1 +
 plugins/renamer/src/search/types.ts          |  1 +
 5 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/plugins/renamer/src/App.css b/plugins/renamer/src/App.css
index d9f9f8880..e21762ed8 100644
--- a/plugins/renamer/src/App.css
+++ b/plugins/renamer/src/App.css
@@ -410,6 +410,8 @@ body:not([data-framer-styles="prerelease"]) .results-container:before {
 
 .icon {
     flex-shrink: 0;
+    width: 12px;
+    height: 12px;
 }
 
 .before .icon {
diff --git a/plugins/renamer/src/components/LayerIcon.tsx b/plugins/renamer/src/components/LayerIcon.tsx
index b58d95c08..9d73e6abe 100644
--- a/plugins/renamer/src/components/LayerIcon.tsx
+++ b/plugins/renamer/src/components/LayerIcon.tsx
@@ -3,9 +3,10 @@ import type { IndexNodeType } from "../search/types"
 
 interface Props {
     type: IndexNodeType
+    isBreakpoint: boolean
 }
 
-export default function LayerIcon({ type }: Props) {
+export default function LayerIcon({ type, isBreakpoint }: Props) {
     const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", [])
 
     let icon = null
@@ -35,7 +36,39 @@ export default function LayerIcon({ type }: Props) {
                 )
                 break
             case "FrameNode":
-                icon = (
+                icon = isBreakpoint ? (
+                    <svg
+                        role="presentation"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        className="frame-icon"
+                    >
+                        <defs>
+                            <clipPath id="breakpoint-clip-path">
+                                <path d="M.5 3.5a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3Z"></path>
+                            </clipPath>
+                        </defs>
+                        <path
+                            d="M.5 3.5a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3Z"
+                            fill="transparent"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="3"
+                            clipPath="url(#breakpoint-clip-path)"
+                        />
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.2"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M10 1.5H2.5l-1 1v2H11v-1Z"
+                        />
+                    </svg>
+                ) : (
                     <svg
                         role="presentation"
                         xmlns="http://www.w3.org/2000/svg"
@@ -89,20 +122,46 @@ export default function LayerIcon({ type }: Props) {
         switch (type) {
             case "TextNode":
                 icon = (
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" className="text-icon">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        role="presentation"
+                        width="12"
+                        height="12"
+                        className="text-icon"
+                    >
                         <path
-                            d="M 5.5 4 L 5.5 8.5 M 2.5 3 L 8.5 3"
+                            d="M6 3.5v6M2.25 2.5h7.5"
                             fill="transparent"
                             strokeWidth="2"
                             stroke="currentColor"
                             strokeLinecap="round"
+                            strokeMiterlimit="10"
                         />
                     </svg>
                 )
                 break
 
             case "FrameNode":
-                icon = (
+                icon = isBreakpoint ? (
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        fill="none"
+                        role="presentation"
+                        className="frame-icon"
+                    >
+                        <path
+                            fill="currentColor"
+                            d="M1 3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 1 4Z"
+                        />
+                        <path
+                            fill="currentColor"
+                            fillOpacity="0.4"
+                            d="M1 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2Z"
+                        />
+                    </svg>
+                ) : (
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" className="frame-icon">
                         <path
                             d="M 1 2.5 C 1 1.672 1.672 1 2.5 1 L 8.5 1 C 9.328 1 10 1.672 10 2.5 L 10 8.5 C 10 9.328 9.328 10 8.5 10 L 2.5 10 C 1.672 10 1 9.328 1 8.5 Z"
@@ -134,9 +193,5 @@ export default function LayerIcon({ type }: Props) {
         }
     }
 
-    return (
-        <div className="icon" style={{ width: 12, height: 12 }}>
-            {icon}
-        </div>
-    )
+    return <div className="icon">{icon}</div>
 }
diff --git a/plugins/renamer/src/components/Results.tsx b/plugins/renamer/src/components/Results.tsx
index 624a93a4f..38929f052 100644
--- a/plugins/renamer/src/components/Results.tsx
+++ b/plugins/renamer/src/components/Results.tsx
@@ -119,7 +119,7 @@ export default function Results({ query, indexing, results, selectedNodeIds, get
                                     void focusResult(result)
                                 }}
                             >
-                                <LayerIcon type={result.entry.type} />
+                                <LayerIcon type={result.entry.type} isBreakpoint={result.entry.isBreakpoint} />
                             </RenameComparison>
                         ))}
                     </div>
diff --git a/plugins/renamer/src/search/indexer.ts b/plugins/renamer/src/search/indexer.ts
index ff699e8dc..8b435928f 100644
--- a/plugins/renamer/src/search/indexer.ts
+++ b/plugins/renamer/src/search/indexer.ts
@@ -93,6 +93,7 @@ export class Indexer {
                     type: node.__class,
                     locked: node.locked,
                     visible: node.visible,
+                    isBreakpoint: isFrameNode(node) && node.isBreakpoint,
                     name,
                     rect,
                     text,
diff --git a/plugins/renamer/src/search/types.ts b/plugins/renamer/src/search/types.ts
index 7e214ddf2..ee4649653 100644
--- a/plugins/renamer/src/search/types.ts
+++ b/plugins/renamer/src/search/types.ts
@@ -11,6 +11,7 @@ export interface IndexEntry {
     rect: { x: number; y: number; width: number; height: number } | null
     visible: boolean
     locked: boolean
+    isBreakpoint: boolean
 }
 
 export interface Result {

From 6449da6001fbe536a61198c8e7684f1cf9181503 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Wed, 20 May 2026 10:25:35 -0400
Subject: [PATCH 5/5] Use selector for tabs

---
 plugins/renamer/src/App.css             | 78 ++++++++++++-------------
 plugins/renamer/src/components/Tabs.tsx | 36 +++++-------
 2 files changed, 50 insertions(+), 64 deletions(-)

diff --git a/plugins/renamer/src/App.css b/plugins/renamer/src/App.css
index e21762ed8..83d124ff6 100644
--- a/plugins/renamer/src/App.css
+++ b/plugins/renamer/src/App.css
@@ -49,6 +49,10 @@
     position: relative;
 }
 
+[data-framer-styles="prerelease"] .tabs {
+    padding: 0 15px;
+}
+
 .tabs:before {
     content: "";
     position: absolute;
@@ -60,6 +64,10 @@
     z-index: 1;
 }
 
+[data-framer-styles="prerelease"] .tabs:before {
+    display: none;
+}
+
 .tabs-container {
     position: relative;
     display: flex;
@@ -73,6 +81,16 @@
     height: 30px;
 }
 
+[data-framer-styles="prerelease"] .tabs-container {
+    justify-content: start;
+    background-color: transparent;
+    border-radius: 0;
+    padding: 10px 0;
+    height: auto;
+    border-top: 1px solid var(--framer-color-divider);
+    border-bottom: 1px solid var(--framer-color-divider);
+}
+
 .tab {
     position: relative;
     background: none !important;
@@ -85,15 +103,33 @@
     transition: color 200ms ease;
 }
 
+[data-framer-styles="prerelease"] .tab {
+    flex: none;
+    width: fit-content;
+    height: 30px;
+    padding: 0 11px;
+    transition:
+        color 100ms ease,
+        background-color 100ms ease;
+}
+
 .tab:not(.active):hover {
     color: var(--framer-color-text-secondary);
 }
 
+[data-framer-styles="prerelease"] .tab:not(.active):hover {
+    color: #999999;
+}
+
 .tab.active {
     color: var(--framer-color-text);
     font-weight: 600;
 }
 
+[data-framer-styles="prerelease"] .tab.active {
+    background-color: var(--framer-color-bg-tertiary) !important;
+}
+
 .tab-bg-container {
     position: absolute;
     inset: 2px;
@@ -116,48 +152,6 @@
     background-color: #555;
 }
 
-/* Prerelease tabs styles */
-.prerelease-tabs {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding: 0 15px;
-    position: relative;
-}
-
-.prerelease-tabs-container {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: start;
-    width: 100%;
-    padding: 10px 0;
-    border-top: 1px solid var(--framer-color-divider);
-    border-bottom: 1px solid var(--framer-color-divider);
-}
-
-.prerelease-tab {
-    position: relative;
-    border: 0;
-    width: fit-content;
-    height: 30px;
-    color: #999999;
-    background-color: transparent !important;
-    font-weight: 500;
-    user-select: none;
-    padding: 0 11px;
-    transition:
-        color 100ms ease,
-        background-color 100ms ease;
-}
-
-.prerelease-tab.active {
-    color: var(--framer-color-text);
-    background-color: var(--framer-color-bg-tertiary) !important;
-    font-weight: 600;
-}
-
 /* TextField styles */
 .text-field {
     background-color: var(--framer-color-bg-tertiary);
diff --git a/plugins/renamer/src/components/Tabs.tsx b/plugins/renamer/src/components/Tabs.tsx
index 1625dc9ba..52d05ca97 100644
--- a/plugins/renamer/src/components/Tabs.tsx
+++ b/plugins/renamer/src/components/Tabs.tsx
@@ -15,30 +15,22 @@ export default function Tabs({ items }: Props) {
     const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", [])
     const activeIndex = items.findIndex(item => item.active)
 
-    return isPrerelease ? (
-        <div className="prerelease-tabs">
-            <div className="prerelease-tabs-container">
-                {items.map((item, index) => (
-                    <button key={index} className={cx("prerelease-tab", item.active && "active")} onClick={item.select}>
-                        {item.label}
-                    </button>
-                ))}
-            </div>
-        </div>
-    ) : (
+    return (
         <div className="tabs">
             <div className="tabs-container">
-                <div className="tab-bg-container">
-                    {activeIndex !== -1 && (
-                        <div
-                            className="tab-bg"
-                            style={{
-                                width: `${100 / items.length}%`,
-                                left: `${(100 / items.length) * activeIndex}%`,
-                            }}
-                        />
-                    )}
-                </div>
+                {!isPrerelease && (
+                    <div className="tab-bg-container">
+                        {activeIndex !== -1 && (
+                            <div
+                                className="tab-bg"
+                                style={{
+                                    width: `${100 / items.length}%`,
+                                    left: `${(100 / items.length) * activeIndex}%`,
+                                }}
+                            />
+                        )}
+                    </div>
+                )}
 
                 {items.map((item, index) => (
                     <button key={index} className={cx("tab", item.active && "active")} onClick={item.select}>