diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index e03ab644c5..b401954b12 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -680,7 +680,7 @@ defineOgImageComponent('Package', {
:key="pm.id"
role="tab"
:aria-selected="selectedPM === pm.id"
- class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+ class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
:class="
selectedPM === pm.id
? 'bg-bg shadow text-fg border-border'
@@ -688,6 +688,7 @@ defineOgImageComponent('Package', {
"
@click="selectedPM = pm.id"
>
+
{{ pm.label }}
diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
index a27d98f0ae..a12327ff72 100644
--- a/app/utils/install-command.ts
+++ b/app/utils/install-command.ts
@@ -1,12 +1,37 @@
import type { JsrPackageInfo } from '#shared/types/jsr'
+// @unocss-include
export const packageManagers = [
- { id: 'npm', label: 'npm', action: 'install', execute: 'npx' },
- { id: 'pnpm', label: 'pnpm', action: 'add', execute: 'pnpm dlx' },
- { id: 'yarn', label: 'yarn', action: 'add', execute: 'yarn dlx' },
- { id: 'bun', label: 'bun', action: 'add', execute: 'bunx' },
- { id: 'deno', label: 'deno', action: 'add', execute: 'deno run' },
- { id: 'vlt', label: 'vlt', action: 'install', execute: 'vlt x' },
+ {
+ id: 'npm',
+ label: 'npm',
+ action: 'install',
+ execute: 'npx',
+ icon: 'i-simple-icons:npm',
+ },
+ {
+ id: 'pnpm',
+ label: 'pnpm',
+ action: 'add',
+ execute: 'pnpm dlx',
+ icon: 'i-simple-icons:pnpm',
+ },
+ {
+ id: 'yarn',
+ label: 'yarn',
+ action: 'add',
+ execute: 'yarn dlx',
+ icon: 'i-simple-icons:yarn',
+ },
+ { id: 'bun', label: 'bun', action: 'add', execute: 'bunx', icon: 'i-simple-icons:bun' },
+ {
+ id: 'deno',
+ label: 'deno',
+ action: 'add',
+ execute: 'deno run',
+ icon: 'i-simple-icons:deno',
+ },
+ { id: 'vlt', label: 'vlt', action: 'install', execute: 'vlt x', icon: 'i-custom-vlt' },
] as const
export type PackageManagerId = (typeof packageManagers)[number]['id']
diff --git a/uno.config.ts b/uno.config.ts
index a6aa70badd..75b8a52333 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -10,6 +10,7 @@ import type { Theme } from '@unocss/preset-wind4/theme'
const customIcons = {
tangled:
'',
+ vlt: '',
}
export default defineConfig({