diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 7fe7b1621e..8c2bdaa6da 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { shallowRef, computed } from 'vue'
+import { computed, shallowRef } from 'vue'
 
 interface Props {
   title: string
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
+  order?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +21,7 @@ const contentId = `${props.id}-collapsible-content`
 const headingId = `${props.id}-heading`
 
 const isOpen = shallowRef(true)
+const isPinned = shallowRef(false)
 
 onPrehydrate(() => {
   const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
@@ -38,13 +40,14 @@ onPrehydrate(() => {
 onMounted(() => {
   if (document?.documentElement) {
     isOpen.value = !(document.documentElement.dataset.collapsed?.includes(props.id) ?? false)
+    isPinned.value = document.documentElement.dataset.pinned?.includes(props.id) ?? false
   }
 })
 
 function toggle() {
   isOpen.value = !isOpen.value
 
-  const removed = appSettings.settings.value.sidebar.collapsed.filter(c => c !== props.id)
+  const removed = appSettings.settings.value.sidebar.collapsed?.filter(c => c !== props.id) ?? []
 
   if (isOpen.value) {
     appSettings.settings.value.sidebar.collapsed = removed
@@ -57,6 +60,21 @@ function toggle() {
     appSettings.settings.value.sidebar.collapsed.join(' ')
 }
 
+function togglePin() {
+  isPinned.value = !isPinned.value
+
+  const removed = appSettings.settings.value.sidebar.pinned?.filter(c => c !== props.id) ?? []
+
+  if (isPinned.value) {
+    removed.push(props.id)
+    appSettings.settings.value.sidebar.pinned = removed
+  } else {
+    appSettings.settings.value.sidebar.pinned = removed
+  }
+
+  document.documentElement.dataset.pinned = appSettings.settings.value.sidebar.pinned.join(' ')
+}
+
 const ariaLabel = computed(() => {
   const action = isOpen.value ? 'Collapse' : 'Expand'
   return props.title ? `${action} ${props.title}` : action
@@ -74,7 +92,11 @@ useHead({
 </script>
 
 <template>
-  <section class="scroll-mt-20" :data-anchor-id="id">
+  <section
+    class="scroll-mt-20"
+    :class="order !== undefined ? `order-${order}` : ''"
+    :data-anchor-id="id"
+  >
     <div class="flex items-center justify-between mb-3">
       <component
         :is="headingLevel"
@@ -117,6 +139,15 @@ useHead({
 
       <!-- Actions slot for buttons or other elements -->
       <slot name="actions" />
+      <!-- pin button -->
+      <button
+        type="button"
+        class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+        @click="togglePin"
+      >
+        <span v-if="isPinned" class="i-carbon:pin-filled w-3 h-3" aria-hidden="true" />
+        <span v-else class="i-carbon:pin w-3 h-3" aria-hidden="true" />
+      </button>
     </div>
 
     <div
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index f1524d3669..c62ed1d813 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -6,6 +6,7 @@ const props = defineProps<{
     content?: Record<string, string>
     npxDependencies: Record<string, string>
   }
+  order: number
 }>()
 
 const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
@@ -18,15 +19,7 @@ const isExpanded = shallowRef(false)
 </script>
 
 <template>
-  <section>
-    <h2
-      id="install-scripts-heading"
-      class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-2"
-    >
-      <span class="i-carbon:warning-alt w-3 h-3 text-yellow-500" aria-hidden="true" />
-      {{ $t('package.install_scripts.title') }}
-    </h2>
-
+  <CollapsibleSection id="install-scripts" :title="$t('package.install_scripts.title')" :order>
     <!-- Script list: name as label, content below -->
     <dl class="space-y-2 m-0">
       <div v-for="scriptName in installScripts.scripts" :key="scriptName">
@@ -112,5 +105,5 @@ const isExpanded = shallowRef(false)
         </li>
       </ul>
     </div>
-  </section>
+  </CollapsibleSection>
 </template>
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 3757ea05f9..c3675506c2 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -4,6 +4,7 @@ import type { NewOperation } from '~/composables/useConnector'
 const props = defineProps<{
   packageName: string
   maintainers?: Array<{ name?: string; email?: string }>
+  order: number
 }>()
 
 const {
@@ -168,19 +169,12 @@ watch(
 </script>
 
 <template>
-  <section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20">
-    <h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      <a
-        href="#maintainers"
-        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-      >
-        {{ $t('package.maintainers.title') }}
-        <span
-          class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-          aria-hidden="true"
-        />
-      </a>
-    </h2>
+  <CollapsibleSection
+    v-if="maintainers?.length"
+    id="maintainers"
+    :title="$t('package.maintainers.title')"
+    :order
+  >
     <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
       <li
         v-for="maintainer in visibleMaintainers"
@@ -293,5 +287,5 @@ watch(
         {{ $t('package.maintainers.add_owner') }}
       </button>
     </div>
-  </section>
+  </CollapsibleSection>
 </template>
diff --git a/app/components/Package/Playgrounds.vue b/app/components/Package/Playgrounds.vue
index 15b5750135..27fb4798f1 100644
--- a/app/components/Package/Playgrounds.vue
+++ b/app/components/Package/Playgrounds.vue
@@ -4,6 +4,7 @@ import { decodeHtmlEntities } from '~/utils/formatters'
 
 const props = defineProps<{
   links: PlaygroundLink[]
+  order: number
 }>()
 
 // Map provider id to icon class
@@ -109,11 +110,12 @@ function focusMenuItem(index: number) {
 </script>
 
 <template>
-  <section v-if="links.length > 0">
-    <h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      {{ $t('package.playgrounds.title') }}
-    </h2>
-
+  <CollapsibleSection
+    v-if="links.length > 0"
+    id="playgrounds"
+    :title="$t('package.playgrounds.title')"
+    :order
+  >
     <div ref="dropdownRef" class="relative">
       <!-- Single link: direct button -->
       <TooltipApp v-if="hasSingleLink && firstLink" :text="firstLink.providerName" class="w-full">
@@ -189,5 +191,5 @@ function focusMenuItem(index: number) {
         </div>
       </Transition>
     </div>
-  </section>
+  </CollapsibleSection>
 </template>
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index ba61aa35a7..e22c6e58da 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
   versions: Record<string, PackumentVersion>
   distTags: Record<string, string>
   time: Record<string, string>
+  order: number
 }>()
 
 /** Maximum number of dist-tag rows to show before collapsing into "Other versions" */
@@ -315,6 +316,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
     v-if="allTagRows.length > 0"
     :title="$t('package.versions.title')"
     id="versions"
+    :order
   >
     <div class="space-y-0.5 min-w-0">
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 3bf674b351..7eb83f5c13 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -5,6 +5,7 @@ import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
 const props = defineProps<{
   packageName: string
+  order: number
 }>()
 
 const chartModal = useModal('chart-modal')
@@ -196,6 +197,20 @@ const config = computed(() => {
 </script>
 
 <template>
+<<<<<<< HEAD:app/components/PackageWeeklyDownloadStats.vue
+  <CollapsibleSection id="downloads" :title="$t('package.downloads.title')" :order>
+    <template #actions>
+      <button
+        type="button"
+        @click="showModal = true"
+        class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+        :title="$t('package.downloads.analyze')"
+      >
+        <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
+        <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
+      </button>
+    </template>
+=======
   <div class="space-y-8">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
@@ -209,44 +224,44 @@ const config = computed(() => {
           <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
         </button>
       </template>
+>>>>>>> main:app/components/Package/WeeklyDownloadStats.vue
 
-      <div class="w-full overflow-hidden">
-        <ClientOnly>
-          <VueUiSparkline class="w-full max-w-xs" :dataset :config>
-            <template #skeleton>
-              <!-- This empty div overrides the default built-in scanning animation on load -->
-              <div />
-            </template>
-          </VueUiSparkline>
-          <template #fallback>
-            <!-- Skeleton matching sparkline layout: title row + chart with data label -->
-            <div class="min-h-[75.195px]">
-              <!-- Title row: date range (24px height) -->
-              <div class="h-6 flex items-center ps-3">
-                <span class="skeleton h-3 w-36" />
+    <div class="w-full overflow-hidden">
+      <ClientOnly>
+        <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+          <template #skeleton>
+            <!-- This empty div overrides the default built-in scanning animation on load -->
+            <div />
+          </template>
+        </VueUiSparkline>
+        <template #fallback>
+          <!-- Skeleton matching sparkline layout: title row + chart with data label -->
+          <div class="min-h-[75.195px]">
+            <!-- Title row: date range (24px height) -->
+            <div class="h-6 flex items-center ps-3">
+              <span class="skeleton h-3 w-36" />
+            </div>
+            <!-- Chart area: data label left, sparkline right -->
+            <div class="aspect-[500/80] flex items-center">
+              <!-- Data label (covers ~42% width) -->
+              <div class="w-[42%] flex items-center ps-0.5">
+                <span class="skeleton h-7 w-24" />
               </div>
-              <!-- Chart area: data label left, sparkline right -->
-              <div class="aspect-[500/80] flex items-center">
-                <!-- Data label (covers ~42% width) -->
-                <div class="w-[42%] flex items-center ps-0.5">
-                  <span class="skeleton h-7 w-24" />
-                </div>
-                <!-- Sparkline area (~58% width) -->
-                <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
-                  <span
-                    v-for="i in 16"
-                    :key="i"
-                    class="skeleton flex-1 rounded-sm"
-                    :style="{ height: `${25 + ((i * 7) % 50)}%` }"
-                  />
-                </div>
+              <!-- Sparkline area (~58% width) -->
+              <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
+                <span
+                  v-for="i in 16"
+                  :key="i"
+                  class="skeleton flex-1 rounded-sm"
+                  :style="{ height: `${25 + ((i * 7) % 50)}%` }"
+                />
               </div>
             </div>
-          </template>
-        </ClientOnly>
-      </div>
-    </CollapsibleSection>
-  </div>
+          </div>
+        </template>
+      </ClientOnly>
+    </div>
+  </CollapsibleSection>
 
   <PackageChartModal v-if="isChartModalOpen" @close="isChartModalOpen = false">
     <PackageDownloadAnalytics
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index 73445a7497..80f733f090 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -21,6 +21,7 @@ export interface AppSettings {
   selectedLocale: LocaleObject['code'] | null
   sidebar: {
     collapsed: string[]
+    pinned: string[]
   }
 }
 
@@ -32,6 +33,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   selectedLocale: null,
   sidebar: {
     collapsed: [],
+    pinned: [],
   },
 }
 
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 81b53d60f5..5644b1bb0a 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -12,6 +12,22 @@ import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
 
+const defaultSections = [
+  'maintainers',
+  'accessControls',
+  'keywords',
+  'downloads',
+  'playgrounds',
+  'compatibility',
+  'versions',
+  'installScripts',
+  'dependencies',
+  'peerDependencies',
+  'optionalDependencies',
+]
+
+type SideBarSection = (typeof defaultSections)[number]
+
 definePageMeta({
   name: 'package',
   alias: ['/package/:package(.*)*'],
@@ -386,6 +402,22 @@ function handleClick(event: MouseEvent) {
     router.push(route)
   }
 }
+
+const { settings } = useSettings()
+
+const sidebar = computed(() => settings.value.sidebar.pinned)
+
+const sideBarSections = shallowRef<SideBarSection[]>(defaultSections)
+
+function updateSections() {
+  const sections = new Set(settings.value.sidebar.pinned)
+  defaultSections.forEach(section => sections.add(section))
+
+  sideBarSections.value = [...sections]
+}
+
+watch(sidebar, () => updateSections())
+onMounted(() => updateSections())
 </script>
 
 <template>
@@ -965,32 +997,29 @@ function handleClick(event: MouseEvent) {
 
       <div class="area-sidebar">
         <!-- Sidebar -->
-        <div class="sticky top-20 space-y-6 sm:space-y-8 min-w-0 overflow-hidden">
+        <div class="sticky top-20 gap-6 min-w-0 overflow-hidden flex flex-col">
           <!-- Maintainers (with admin actions when connected) -->
-          <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
+          <PackageMaintainers
+            :order="sideBarSections.indexOf('maintainers')"
+            :package-name="pkg.name"
+            :maintainers="pkg.maintainers"
+          />
 
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>
-            <PackageAccessControls :package-name="pkg.name" />
+            <PackageAccessControls
+              :order="sideBarSections.indexOf('accessControl')"
+              :package-name="pkg.name"
+            />
           </ClientOnly>
 
           <!-- Keywords -->
-          <section id="keywords" v-if="displayVersion?.keywords?.length" class="scroll-mt-20">
-            <h2
-              id="keywords-heading"
-              class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
-            >
-              <a
-                href="#keywords"
-                class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-              >
-                {{ $t('package.keywords_title') }}
-                <span
-                  class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                  aria-hidden="true"
-                />
-              </a>
-            </h2>
+          <CollapsibleSection
+            :order="sideBarSections.indexOf('keywords')"
+            v-if="displayVersion?.keywords?.length"
+            id="keywords"
+            :title="$t('package.keywords_title')"
+          >
             <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
               <li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
                 <NuxtLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }" class="tag">
@@ -998,7 +1027,7 @@ function handleClick(event: MouseEvent) {
                 </NuxtLink>
               </li>
             </ul>
-          </section>
+          </CollapsibleSection>
 
           <!-- Agent Skills -->
           <ClientOnly>
@@ -1011,36 +1040,26 @@ function handleClick(event: MouseEvent) {
           </ClientOnly>
 
           <!-- Download stats -->
-          <PackageWeeklyDownloadStats :packageName />
+          <PackageWeeklyDownloadStats
+            :order="sideBarSections.indexOf('downloads')"
+            :packageName="pkg.name"
+          />
 
           <!-- Playground links -->
           <PackagePlaygrounds
             v-if="readmeData?.playgroundLinks?.length"
             :links="readmeData.playgroundLinks"
+            :order="sideBarSections.indexOf('playgrounds')"
           />
 
-          <section
-            id="compatibility"
+          <CollapsibleSection
             v-if="
               displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)
             "
-            class="scroll-mt-20"
+            :order="sideBarSections.indexOf('compatibility')"
+            id="compatibility"
+            :title="$t('package.compatibility')"
           >
-            <h2
-              id="compatibility-heading"
-              class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
-            >
-              <a
-                href="#compatibility"
-                class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-              >
-                {{ $t('package.compatibility') }}
-                <span
-                  class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                  aria-hidden="true"
-                />
-              </a>
-            </h2>
             <dl class="space-y-2">
               <div v-if="displayVersion.engines.node" class="flex justify-between gap-4 py-1">
                 <dt class="text-fg-muted text-sm shrink-0">node</dt>
@@ -1055,11 +1074,12 @@ function handleClick(event: MouseEvent) {
                 </dd>
               </div>
             </dl>
-          </section>
+          </CollapsibleSection>
 
           <!-- Versions (grouped by release channel) -->
           <PackageVersions
             v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
+            :order="sideBarSections.indexOf('versions')"
             :package-name="pkg.name"
             :versions="pkg.versions"
             :dist-tags="pkg['dist-tags'] ?? {}"
@@ -1071,11 +1091,13 @@ function handleClick(event: MouseEvent) {
             v-if="displayVersion?.installScripts"
             :package-name="pkg.name"
             :install-scripts="displayVersion.installScripts"
+            :order="sideBarSections.indexOf('installScripts')"
           />
 
           <!-- Dependencies -->
           <PackageDependencies
             v-if="hasDependencies && displayVersion"
+            :sideBarSections="sideBarSections"
             :package-name="pkg.name"
             :version="displayVersion.version"
             :dependencies="displayVersion.dependencies"
diff --git a/app/utils/prehydrate.ts b/app/utils/prehydrate.ts
index 72b79e577d..c7f83befa5 100644
--- a/app/utils/prehydrate.ts
+++ b/app/utils/prehydrate.ts
@@ -57,5 +57,6 @@ export function initPreferencesOnPrehydrate() {
     document.documentElement.dataset.pm = pm
 
     document.documentElement.dataset.collapsed = settings.sidebar?.collapsed?.join(' ') ?? ''
+    document.documentElement.dataset.pinned = settings.sidebar?.pinned?.join(' ') ?? ''
   })
 }
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index c95f377645..53fe5029e8 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -441,7 +441,7 @@ describe('component accessibility audits', () => {
         },
       ]
       const component = await mountSuspended(PackagePlaygrounds, {
-        props: { links },
+        props: { links, order: 0 },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -463,7 +463,7 @@ describe('component accessibility audits', () => {
         },
       ]
       const component = await mountSuspended(PackagePlaygrounds, {
-        props: { links },
+        props: { links, order: 0 },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -471,7 +471,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations with empty links', async () => {
       const component = await mountSuspended(PackagePlaygrounds, {
-        props: { links: [] },
+        props: { links: [], order: 0 },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -481,7 +481,11 @@ describe('component accessibility audits', () => {
   describe('PackageDependencies', () => {
     it('should have no accessibility violations without dependencies', async () => {
       const component = await mountSuspended(PackageDependencies, {
-        props: { packageName: 'test-package', version: '1.0.0' },
+        props: {
+          packageName: 'test-package',
+          version: '1.0.0',
+          sideBarSections: ['dependencies', 'peerDependencies', 'optionalDependencies'],
+        },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -496,6 +500,7 @@ describe('component accessibility audits', () => {
             vue: '^3.0.0',
             lodash: '^4.17.0',
           },
+          sideBarSections: ['dependencies', 'peerDependencies', 'optionalDependencies'],
         },
       })
       const results = await runAxe(component)
@@ -513,6 +518,7 @@ describe('component accessibility audits', () => {
           peerDependenciesMeta: {
             vue: { optional: true },
           },
+          sideBarSections: ['dependencies', 'peerDependencies', 'optionalDependencies'],
         },
       })
       const results = await runAxe(component)
@@ -545,6 +551,7 @@ describe('component accessibility audits', () => {
             '3.5.0': '2024-01-15T00:00:00.000Z',
             '3.4.0': '2024-01-01T00:00:00.000Z',
           },
+          order: 0,
         },
       })
       const results = await runAxe(component)
@@ -581,7 +588,7 @@ describe('component accessibility audits', () => {
   describe('PackageMaintainers', () => {
     it('should have no accessibility violations without maintainers', async () => {
       const component = await mountSuspended(PackageMaintainers, {
-        props: { packageName: 'vue' },
+        props: { packageName: 'vue', order: 0 },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -595,6 +602,7 @@ describe('component accessibility audits', () => {
             { name: 'yyx990803', email: 'evan@vuejs.org' },
             { name: 'posva', email: 'posva@example.com' },
           ],
+          order: 0,
         },
       })
       const results = await runAxe(component)
diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
index ca980c8eda..ab5cec86ed 100644
--- a/test/nuxt/components/PackageVersions.spec.ts
+++ b/test/nuxt/components/PackageVersions.spec.ts
@@ -51,6 +51,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -64,6 +65,7 @@ describe('PackageVersions', () => {
           versions: {},
           distTags: {},
           time: {},
+          order: 0,
         },
       })
 
@@ -79,6 +81,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '2.0.0' },
           time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -99,6 +102,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -121,6 +125,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -139,6 +144,7 @@ describe('PackageVersions', () => {
             stable: '1.0.0',
           },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -160,6 +166,7 @@ describe('PackageVersions', () => {
             beta: '1.0.0',
           },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -193,6 +200,7 @@ describe('PackageVersions', () => {
             '1.5.0': '2024-01-10T00:00:00.000Z',
             '2.0.0': '2024-01-15T00:00:00.000Z',
           },
+          order: 0,
         },
       })
 
@@ -216,6 +224,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -236,6 +245,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -263,6 +273,7 @@ describe('PackageVersions', () => {
             '1.0.0': '2024-01-01T00:00:00.000Z',
             '2.0.0': '2024-01-15T00:00:00.000Z',
           },
+          order: 0,
         },
       })
 
@@ -282,6 +293,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -299,6 +311,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -317,6 +330,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -335,6 +349,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -352,6 +367,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -373,6 +389,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -401,6 +418,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.2.0' },
           time: { '1.2.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -451,6 +469,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -476,6 +495,7 @@ describe('PackageVersions', () => {
           versions,
           distTags,
           time,
+          order: 0,
         },
       })
 
@@ -497,6 +517,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -527,6 +548,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -568,6 +590,7 @@ describe('PackageVersions', () => {
           versions,
           distTags,
           time,
+          order: 0,
         },
       })
 
@@ -597,6 +620,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '2.0.0' },
           time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -628,6 +652,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '2.0.0' },
           time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -659,6 +684,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '2.0.0' },
           time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -690,6 +716,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '2.0.0' },
           time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -722,6 +749,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '2.0.0' },
           time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -754,6 +782,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '2.0.0' },
           time: { '2.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -793,6 +822,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -824,6 +854,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -854,6 +885,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -873,6 +905,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -890,6 +923,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -909,6 +943,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -925,6 +960,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -951,6 +987,7 @@ describe('PackageVersions', () => {
           },
           distTags: { latest: '1.0.0' },
           time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
+          order: 0,
         },
       })
 
@@ -989,6 +1026,7 @@ describe('PackageVersions', () => {
             '2.0.0': '2024-01-15T12:00:00.000Z',
             '1.0.0': '2024-01-10T12:00:00.000Z',
           },
+          order: 0,
         },
       })
 
diff --git a/uno.config.ts b/uno.config.ts
index 67a80d9548..df5d75dba2 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -200,4 +200,5 @@ export default defineConfig({
     // Ensures elements start in initial state during delay
     ['animate-fill-both', { 'animation-fill-mode': 'both' }],
   ],
+  safelist: Array.from({ length: 15 }, (_, i) => `order-${i}`),
 })