feat: add package manager select dropdown #379

jonathanyeong · 2026-01-30T03:48:47Z

This replaces the tab list so it's extra clear to the user what package manager they've selected. It also lets use use it in the connector modal to be explicit on the package manager choice.

The dropdown is inspired by Stripe's dev docs

Testing

✅ Tests pass locally

Light Mode Desktop

light-mode-package-desktop.mp4

light-mode-connector-modal.mp4

Dark Mode Desktop

dark-mode-connector-modal.mp4

dark-mode-package-desktop.mp4

Mobile view

mobile-dropdown.mp4

Small bugfix on focus ring being cut off

Before	After

hard-refresh-test.mp4

vercel · 2026-01-30T03:48:52Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jan 31, 2026 7:20am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jan 31, 2026 7:20am
npmx-lunaria	Ignored		Jan 31, 2026 7:20am

jonathanyeong · 2026-01-30T03:50:37Z

app/components/PackageManagerSelect.vue

+
+<template>
+  <div class="relative">
+    <button


Chose to build a custom dropdown because I think icons don't show up well in native select. Someone please correct me if I'm wrong!

jonathanyeong · 2026-01-30T04:12:08Z

Not quite ready for review there's a bug when the install container is short

install container is short and cuts off the package manager list

userquin · 2026-01-30T06:34:17Z

app/components/ConnectorModal.vue

-                    aria-hidden="true"
-                  />
-                </button>
+                <div class="ml-auto flex items-center gap-2">


use ms-auto instead ml-auto (RTL support): check the contributing guide: https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#rtl-support

userquin · 2026-01-30T06:35:41Z

app/components/PackageManagerSelect.vue

+        </template>
+      </ClientOnly>
+      <span
+        class="i-carbon-chevron-down w-3 h-3"


use : to split collection and icon (small perf at UnoCSS)

danielroe · 2026-01-30T06:36:53Z

much nicer 👌

userquin · 2026-01-30T06:38:18Z

app/components/PackageManagerSelect.vue

+            : undefined
+        "
+        :aria-label="$t('settings.package_manager')"
+        class="absolute right-0 top-full mt-1 min-w-28 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden py-1"


don't use left/right use inset-is and inset-ie respectivelly (when using absolute psotioning)

userquin · 2026-01-30T06:39:03Z

app/components/PackageManagerSelect.vue

+          <span>{{ pm.label }}</span>
+          <span
+            v-if="selectedPM === pm.id"
+            class="i-carbon-checkmark w-3 h-3 text-accent ml-auto shrink-0"


replace ml-auto with ms-auto

danielroe · 2026-01-30T07:04:11Z

FYI: #393 might mean this needs to have conflicts resolved.

we wouldn't render the tabs any more of course, but we'd keep the same approach for rendered install commands

jonathanyeong · 2026-01-30T13:32:46Z

app/pages/[...package].vue

          <PackageManagerTabs />
+          <PackageManagerSelect />


TODO: Remove PackageManagerTabs

This replaces the tab list so it's extra clear to the user what package manager they've selected. It also lets use use it in the connector modal to be explicit on the package manager choice.

jonathanyeong · 2026-01-30T23:07:50Z

app/components/ConnectorModal.vue

-                  />
-                </button>
+                <div class="ms-auto flex items-center gap-2">
+                  <PackageManagerSelect />


Happy to remove this if we think it's too crowded in the connector install area.

jonathanyeong · 2026-01-30T23:09:24Z

app/components/PackageManagerSelect.vue

+  </button>
+
+  <!-- Dropdown menu (teleported to body to avoid clipping) -->
+  <Teleport to="body">


I couldn't think of a better way to avoid clipping. But this means if JS is disabled you won't be able to open the dropdown. I checked in prod and currently you can't interact with the tabs with JS disabled.

It's not great either way, let me know if this is a blocker!

danielroe · 2026-01-30T23:16:51Z

app/components/PackageManagerTabs.vue

-    :aria-label="$t('package.get_started.pm_label')"
-    @keydown="onTabListKeydown"
-  >
-    <button


the way this works right now is that we render all the tabs + all the commands, and we use a data attribute on the root of the document to determine which one is displayed.

this means there's no flicker if you hard reload.

see #393

would you be able to follow the same pattern in this one? (or if it's tricky, let me know and I can adapt the same thing I did there, here....)

Yeah I just noticed that! Yes let me copy that pattern across.

Let me know what you think of the updates. Thanks again for reminding me about that!

jonathanyeong · 2026-01-30T23:40:39Z

app/components/PackageManagerSelect.vue

+      <span
+        class="pm-select-content"
+        :data-pm-select="pmOption.id"
+        :aria-hidden="pmOption.id !== selectedPM"


Not ideal that we generate DOM elements that aren't visible. I tried to mitigate it for screen readers with aria hidden, but I'm open to ideas!

jonathanyeong · 2026-01-31T01:06:09Z

Sorry @danielroe I missed the e2e test!

danielroe

beautiful!

vercel bot deployed to Preview – npmx.dev January 30, 2026 03:49 View deployment

vercel bot deployed to Preview – docs.npmx.dev January 30, 2026 03:50 View deployment

jonathanyeong commented Jan 30, 2026

View reviewed changes

userquin reviewed Jan 30, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev January 30, 2026 13:03 View deployment

jonathanyeong force-pushed the feat/add-pm-dropdown branch from 6b62ba1 to c82d65d Compare January 30, 2026 13:04

vercel bot deployed to Preview – npmx.dev January 30, 2026 13:05 View deployment

jonathanyeong commented Jan 30, 2026

View reviewed changes

jonathanyeong force-pushed the feat/add-pm-dropdown branch from c82d65d to eac64c4 Compare January 30, 2026 21:52

jonathanyeong added 2 commits January 30, 2026 16:52

feat: add package manager select dropdown

ed0d7b6

This replaces the tab list so it's extra clear to the user what package manager they've selected. It also lets use use it in the connector modal to be explicit on the package manager choice.

fix: clean up css classes for better rtl support

41bd452

jonathanyeong force-pushed the feat/add-pm-dropdown branch from eac64c4 to 41bd452 Compare January 30, 2026 21:52

vercel bot deployed to Preview – npmx.dev January 30, 2026 21:54 View deployment

jonathanyeong added 5 commits January 30, 2026 17:18

fix: fix some styling

669e64e

feat: use teleport to fix popover clipping for short install terminal

3353778

fix: remove client only rendering (matches current package manager tabs)

a4c9724

feat: remove packageManagerTabs

394fed1

fix: focus ring clipping in the install area

03f7254

vercel bot deployed to Preview – npmx.dev January 30, 2026 23:02 View deployment

fix: update aria label

2e663a0

jonathanyeong commented Jan 30, 2026

View reviewed changes

jonathanyeong marked this pull request as ready for review January 30, 2026 23:13

vercel bot deployed to Preview – npmx.dev January 30, 2026 23:14 View deployment

Merge branch 'main' into feat/add-pm-dropdown

2ca089f

danielroe reviewed Jan 30, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev January 30, 2026 23:16 View deployment

fix: prevent flicker on hard refresh

ee7e2de

vercel bot deployed to Preview – npmx.dev January 30, 2026 23:39 View deployment

jonathanyeong commented Jan 30, 2026

View reviewed changes

fix: replace package manager tab spec with select

5bd4212

vercel bot deployed to Preview – npmx.dev January 31, 2026 01:02 View deployment

danielroe approved these changes Jan 31, 2026

View reviewed changes

danielroe added this pull request to the merge queue Jan 31, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 31, 2026

danielroe added this pull request to the merge queue Jan 31, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 31, 2026

danielroe added this pull request to the merge queue Jan 31, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 31, 2026

Merge branch 'main' into feat/add-pm-dropdown

602cc45

vercel bot deployed to Preview – npmx.dev January 31, 2026 07:20 View deployment

danielroe added this pull request to the merge queue Jan 31, 2026

Merged via the queue into npmx-dev:main with commit 6dd5750 Jan 31, 2026
13 checks passed

Uh oh!

feat: add package manager select dropdown #379

feat: add package manager select dropdown #379

Conversation

jonathanyeong commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Uh oh!

vercel bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonathanyeong commented Jan 30, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielroe commented Jan 30, 2026

Uh oh!

userquin Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielroe commented Jan 30, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonathanyeong commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielroe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jonathanyeong commented Jan 30, 2026 •

edited

Loading

vercel bot commented Jan 30, 2026 •

edited

Loading

userquin Jan 30, 2026 •

edited

Loading

jonathanyeong commented Jan 31, 2026 •

edited

Loading