fix: fix font-sizes for NPM summary on library stat pages (#658)

* fix font-sizes

* add missing corePackageNames

* core package name fixes

Author: KevinVandy

src/components/npm-stats/NPMSummary.tsx

@@ -86,7 +86,7 @@ function StatCard({
   return (
     <div className="flex flex-col items-center text-center">
       <div
-        className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-white"
+        className="text-xl sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-white"
         style={{ fontVariantNumeric: 'tabular-nums' }}
       >
         {animated && npmData ? (
@@ -113,18 +113,18 @@ function NPMSummaryContent({ library }: { library: Library }) {
   const { data: recentStats } = useSuspenseQuery(recentDownloadsQuery(library))
 
   return (
-    <div className="mb-6">
+    <div className="my-6">
       <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
         View download statistics for TanStack {library.name} packages. Compare
         different time periods and track usage trends.
       </p>
 
-      <p className="text-xs text-gray-400 dark:text-gray-500 mt-3 italic">
+      <p className="text-xs text-gray-400 dark:text-gray-500 my-3 italic">
         *These top summary stats account for core packages, legacy package
         names, and all framework adapters.
       </p>
 
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
+      <div className="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-2 xl:grid-cols-4 py-6">
         <StatCard label="All Time Downloads" animated npmData={ossStats.npm} />
         <StatCard
           value={recentStats.monthlyDownloads}

src/libraries/libraries.ts

@@ -50,6 +50,7 @@ export const router: LibrarySlim = {
   badge: undefined,
   repo: 'tanstack/router',
   frameworks: ['react', 'solid'],
+  corePackageName: '@tanstack/router-core',
   latestVersion: 'v1',
   latestBranch: 'main',
   availableVersions: ['v1'],
@@ -129,7 +130,7 @@ export const table: LibrarySlim = {
   scarfId: 'dc8b39e1-3fe9-4f3a-8e56-d4e2cf420a9e',
   ogImage: 'https://github.com/tanstack/table/raw/main/media/repo-header.png',
   defaultDocs: 'introduction',
-  corePackageName: 'table-core',
+  corePackageName: '@tanstack/table-core',
   legacyPackages: ['react-table'],
 }
 
@@ -150,6 +151,7 @@ export const form: LibrarySlim = {
   bgRadial: 'from-yellow-500 via-yellow-600/50 to-transparent',
   badge: 'new',
   repo: 'tanstack/form',
+  corePackageName: '@tanstack/form-core',
   frameworks: ['react', 'vue', 'angular', 'solid', 'lit', 'svelte'],
   latestVersion: 'v1',
   latestBranch: 'main',
@@ -176,6 +178,7 @@ export const virtual: LibrarySlim = {
   badge: undefined,
   repo: 'tanstack/virtual',
   frameworks: ['react', 'solid', 'vue', 'svelte', 'lit', 'angular'],
+  corePackageName: '@tanstack/virtual-core',
   latestVersion: 'v3',
   latestBranch: 'main',
   availableVersions: ['v3'],

src/libraries/table.tsx

@@ -14,7 +14,6 @@ export const tableProject = {
   bgRadial: 'from-cyan-500 via-blue-600/50 to-transparent',
   textColor: 'text-blue-600',
   defaultDocs: 'introduction',
-  corePackageName: 'table-core',
   legacyPackages: ['react-table'],
   handleRedirects: (href: string) => {
     handleRedirects(

src/routes/$libraryId/$version.docs.framework.index.tsx

@@ -20,8 +20,7 @@ function getPackageName(
 ): string {
   if (frameworkValue === 'vanilla') {
     // For vanilla, use corePackageName if provided, otherwise just libraryId
-    const coreName = library.corePackageName || libraryId
-    return `@tanstack/${coreName}`
+    return library.corePackageName ?? `@tanstack/${libraryId}`
   }
   // Special case: Angular Query uses experimental package
   if (frameworkValue === 'angular' && libraryId === 'query') {

src/utils/npm-packages.ts

@@ -112,7 +112,7 @@ export function getLibraryMainPackage(library: LibrarySlim): string {
 
   // Use corePackageName if specified (e.g., table-core)
   if (library.corePackageName) {
-    return `@tanstack/${library.corePackageName}`
+    return library.corePackageName
   }
 
   return `@tanstack/${library.id}`