npmx-dev · serhalp · Feb 24, 2026 · Feb 24, 2026 · Feb 24, 2026 · Feb 27, 2026
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
+import type { NpmxPicksResponse } from '#shared/types/picks'
+
+const { data: picksData } = useFetch<NpmxPicksResponse>('/api/picks')
+const { selectedAccentColor } = useAccentColor()
 
 const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)
@@ -108,17 +111,21 @@ defineOgImageComponent('Default', {
       </header>
 
       <nav
-        :aria-label="$t('nav.popular_packages')"
-        class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both max-w-xl mx-auto"
+        v-if="picksData?.picks?.length"
+        :aria-label="$t('nav.npmx_picks')"
+        class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both"
         style="animation-delay: 0.3s"
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
-          <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
+          <li v-for="pick in picksData?.picks" :key="pick.letter">
+            <LinkBase :to="packageRoute(pick.name)" class="text-sm">
               <span
-                class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
-              />
-              {{ framework.name }}
+                >{{ pick.name.slice(0, pick.letterIndex)
+                }}<span class="font-semibold" :class="{ 'text-accent': selectedAccentColor }">{{
+                  pick.name[pick.letterIndex]
+                }}</span
+                >{{ pick.name.slice(pick.letterIndex + 1) }}</span
+              >
             </LinkBase>
           </li>
         </ul>
@@ -132,13 +139,3 @@ defineOgImageComponent('Default', {
     </section>
   </main>
 </template>
-
-<style scoped>
-/* Windows High Contrast Mode support */
-@media (forced-colors: active) {
-  .home-tag-dot {
-    forced-color-adjust: none;
-    background-color: CanvasText;
-  }
-}
-</style>
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",

diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "compare": "müqayisə",
     "back": "geri",

diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",

diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",

diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",

diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -67,7 +67,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",

diff --git a/i18n/locales/es.json b/i18n/locales/es.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",

diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Barre de navigation",
-    "popular_packages": "Paquets populaires",
+    "npmx_picks": "Suggestions npmx",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",

diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",

diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Főmenü",
-    "popular_packages": "Népszerű csomagok",
     "settings": "beállítások",
     "back": "vissza"
   },

diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",

diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",

diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "メイン",
-    "popular_packages": "人気のパッケージ",
     "settings": "設定",
     "compare": "比較",
     "back": "戻る",

diff --git a/i18n/locales/kn-IN.json b/i18n/locales/kn-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "ಮುಖ್ಯ ನಾವಿಗೇಶನ್",
-    "popular_packages": "ಜನಪ್ರಿಯ ಪ್ಯಾಕೇಜ್‌ಗಳು",
     "settings": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು",
     "compare": "ಹೋಲಿಸಿ",
     "back": "ಹಿಂದೆ",
@@ -124,6 +123,7 @@
       "version": "ಈ ಆವೃತ್ತಿ ಅಮಾನ್ಯಗೊಳಿಸಲಾಗಿದೆ.",
       "no_reason": "ಕಾರಣ ನೀಡಲಾಗಿಲ್ಲ"
     },
+    "size_increase": {},
     "replacement": {
       "title": "ನಿಮಗೆ ಈ ಅವಲಂಬನೆ ಅಗತ್ಯವಿಲ್ಲದಿರಬಹುದು.",
       "native": "ಇದನ್ನು {replacement} ಮೂಲಕ ಬದಲಾಯಿಸಬಹುದು, ಇದು Node {nodeVersion} ರಿಂದ ಲಭ್ಯವಿದೆ.",
@@ -220,7 +220,8 @@
       "more_tagged": "{count} ಇನ್ನಷ್ಟು ಟ್ಯಾಗ್ ಮಾಡಲಾಗಿದೆ",
       "all_covered": "ಎಲ್ಲಾ ಆವೃತ್ತಿಗಳು ಮೇಲಿನ ಟ್ಯಾಗ್‌ಗಳಿಂದ ಒಳಗೊಂಡಿವೆ",
       "deprecated_title": "{version} (ಅಮಾನ್ಯಗೊಳಿಸಲಾಗಿದೆ)",
-      "view_all": "{count} ಆವೃತ್ತಿ ನೋಡಿ | ಎಲ್ಲಾ {count} ಆವೃತ್ತಿಗಳನ್ನು ನೋಡಿ"
+      "view_all": "{count} ಆವೃತ್ತಿ ನೋಡಿ | ಎಲ್ಲಾ {count} ಆವೃತ್ತಿಗಳನ್ನು ನೋಡಿ",
+      "copy_alt": {}
     },
     "dependencies": {
       "title": "ಅವಲಂಬನೆಗಳು ({count})",
@@ -269,7 +270,8 @@
       "date_range_multiline": "{start}\nರಿಂದ {end}",
       "download_file": "{fileType} ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
       "toggle_annotator": "ಅನೋಟೇಟರ್ ಟಾಗಲ್ ಮಾಡಿ",
-      "items": {}
+      "items": {},
+      "copy_alt": {}
     },
     "downloads": {
       "title": "ವಾರದ ಡೌನ್‌ಲೋಡ್‌ಗಳು"
@@ -702,6 +704,8 @@
         "managers": "ನಿರ್ವಾಹಕರು"
       }
     },
+    "sponsors": {},
+    "oss_partners": {},
     "team": {},
     "contributors": {
       "title": "ಸಹಯೋಗಿಗಳು",
@@ -833,7 +837,9 @@
       },
       "values": {},
       "trends": {}
-    }
+    },
+    "file_filter_option": {},
+    "filter": {}
   },
   "privacy_policy": {
     "cookies": {

diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पॅकेजेस",
     "settings": "सेटिंग्ज",
     "compare": "तुलना करा",
     "back": "मागे",

diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hovedmeny",
-    "popular_packages": "Populære pakker",
     "settings": "innstillinger",
     "compare": "sammenlign",
     "back": "tilbake",

diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय प्याकेजहरू",
     "settings": "सेटिङ्स",
     "compare": "तुलना",
     "back": "पछाडि",

diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
@@ -67,7 +67,6 @@
   },
   "nav": {
     "main_navigation": "Główne",
-    "popular_packages": "Popularne pakiety",
     "settings": "ustawienia",
     "compare": "porównaj",
     "back": "wstecz",

diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
@@ -45,7 +45,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Pacotes populares",
     "settings": "configurações",
     "compare": "comparar",
     "back": "voltar",

diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Главное",
-    "popular_packages": "Популярные пакеты",
     "settings": "настройки",
     "back": "назад"
   },

diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "முதன்மை",
-    "popular_packages": "பிரபலமான தொகுப்புகள்",
     "settings": "அமைப்புகள்",
     "compare": "ஒப்பிடு",
     "back": "பின்செல்",

diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "ప్రధాన",
-    "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
     "settings": "సెట్టింగ్‌లు",
     "compare": "పోల్చండి",
     "back": "వెనక్కి",

diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Головна",
-    "popular_packages": "Популярні пакети",
     "settings": "параметри",
     "compare": "порівняти",
     "back": "назад",

diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "主页",
-    "popular_packages": "热门软件包",
     "settings": "设置",
     "compare": "比较包",
     "back": "返回",

diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "首頁",
-    "popular_packages": "熱門套件",
     "settings": "設定",
     "compare": "比較",
     "back": "返回",

diff --git a/i18n/schema.json b/i18n/schema.json
@@ -205,7 +205,7 @@
         "main_navigation": {
           "type": "string"
         },
-        "popular_packages": {
+        "npmx_picks": {
           "type": "string"
         },
         "settings": {

diff --git a/lunaria/files/ar-EG.json b/lunaria/files/ar-EG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",

diff --git a/lunaria/files/az-AZ.json b/lunaria/files/az-AZ.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "compare": "müqayisə",
     "back": "geri",

diff --git a/lunaria/files/bg-BG.json b/lunaria/files/bg-BG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",

diff --git a/lunaria/files/bn-IN.json b/lunaria/files/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",

diff --git a/lunaria/files/cs-CZ.json b/lunaria/files/cs-CZ.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",

diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",

diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",

diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",

diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",