diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts
index 45d865530d9c3a..dfc9473e23ff55 100755
--- a/packages/create-vite/src/index.ts
+++ b/packages/create-vite/src/index.ts
@@ -44,16 +44,16 @@ const FRAMEWORKS: Framework[] = [
     display: 'Vanilla',
     color: yellow,
     variants: [
-      {
-        name: 'vanilla',
-        display: 'JavaScript',
-        color: yellow,
-      },
       {
         name: 'vanilla-ts',
         display: 'TypeScript',
         color: blue,
       },
+      {
+        name: 'vanilla',
+        display: 'JavaScript',
+        color: yellow,
+      },
     ],
   },
   {
@@ -61,16 +61,16 @@ const FRAMEWORKS: Framework[] = [
     display: 'Vue',
     color: green,
     variants: [
-      {
-        name: 'vue',
-        display: 'JavaScript',
-        color: yellow,
-      },
       {
         name: 'vue-ts',
         display: 'TypeScript',
         color: blue,
       },
+      {
+        name: 'vue',
+        display: 'JavaScript',
+        color: yellow,
+      },
       {
         name: 'custom-create-vue',
         display: 'Customize with create-vue ↗',
@@ -90,26 +90,26 @@ const FRAMEWORKS: Framework[] = [
     display: 'React',
     color: cyan,
     variants: [
-      {
-        name: 'react',
-        display: 'JavaScript',
-        color: yellow,
-      },
       {
         name: 'react-ts',
         display: 'TypeScript',
         color: blue,
       },
-      {
-        name: 'react-swc',
-        display: 'JavaScript + SWC',
-        color: yellow,
-      },
       {
         name: 'react-swc-ts',
         display: 'TypeScript + SWC',
         color: blue,
       },
+      {
+        name: 'react',
+        display: 'JavaScript',
+        color: yellow,
+      },
+      {
+        name: 'react-swc',
+        display: 'JavaScript + SWC',
+        color: yellow,
+      },
     ],
   },
   {
@@ -117,16 +117,16 @@ const FRAMEWORKS: Framework[] = [
     display: 'Preact',
     color: magenta,
     variants: [
-      {
-        name: 'preact',
-        display: 'JavaScript',
-        color: yellow,
-      },
       {
         name: 'preact-ts',
         display: 'TypeScript',
         color: blue,
       },
+      {
+        name: 'preact',
+        display: 'JavaScript',
+        color: yellow,
+      },
     ],
   },
   {
@@ -134,16 +134,16 @@ const FRAMEWORKS: Framework[] = [
     display: 'Lit',
     color: lightRed,
     variants: [
-      {
-        name: 'lit',
-        display: 'JavaScript',
-        color: yellow,
-      },
       {
         name: 'lit-ts',
         display: 'TypeScript',
         color: blue,
       },
+      {
+        name: 'lit',
+        display: 'JavaScript',
+        color: yellow,
+      },
     ],
   },
   {
@@ -151,16 +151,16 @@ const FRAMEWORKS: Framework[] = [
     display: 'Svelte',
     color: red,
     variants: [
-      {
-        name: 'svelte',
-        display: 'JavaScript',
-        color: yellow,
-      },
       {
         name: 'svelte-ts',
         display: 'TypeScript',
         color: blue,
       },
+      {
+        name: 'svelte',
+        display: 'JavaScript',
+        color: yellow,
+      },
       {
         name: 'custom-svelte-kit',
         display: 'SvelteKit ↗',