+
{socialLinks}
- {Icon ? (
-
-
+
{title}
diff --git a/src/components/ds/ds-nav.ts b/src/components/ds/ds-nav.ts
index edcaf6387..f36c263d2 100644
--- a/src/components/ds/ds-nav.ts
+++ b/src/components/ds/ds-nav.ts
@@ -47,6 +47,7 @@ export const dsNav: Array
{title}
diff --git a/src/components/ds/ds-nav.ts b/src/components/ds/ds-nav.ts
index edcaf6387..f36c263d2 100644
--- a/src/components/ds/ds-nav.ts
+++ b/src/components/ds/ds-nav.ts
@@ -47,6 +47,7 @@ export const dsNav: Array = [
{ label: 'Collapsible', to: '/ds/collapsible' },
{ label: 'Breadcrumbs', to: '/ds/breadcrumbs' },
{ label: 'Cards & Surfaces', to: '/ds/cards' },
+ { label: 'Navbar', to: '/ds/navbar' },
],
},
]
diff --git a/src/components/icons/CheckCircleIcon.tsx b/src/components/icons/CheckCircleIcon.tsx
deleted file mode 100644
index 58ef1372a..000000000
--- a/src/components/icons/CheckCircleIcon.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react'
-
-export function CheckCircleIcon({
- className,
- width = '1em',
- height = '1em',
- ...props
-}: React.SVGProps) {
- return (
-
- )
-}
diff --git a/src/components/icons/CogsIcon.tsx b/src/components/icons/CogsIcon.tsx
deleted file mode 100644
index 5ad4b159f..000000000
--- a/src/components/icons/CogsIcon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-
-export function CogsIcon({
- className,
- width = '1em',
- height = '1em',
- ...props
-}: React.SVGProps) {
- return (
-
- )
-}
diff --git a/src/libraries/ai.tsx b/src/libraries/ai.tsx
index 91ebd538b..f1386f743 100644
--- a/src/libraries/ai.tsx
+++ b/src/libraries/ai.tsx
@@ -1,7 +1,6 @@
import { Library } from '.'
-import { Plug, Lightning } from '@phosphor-icons/react'
+import { Plug, Lightning, Gear } from '@phosphor-icons/react'
import { twMerge } from 'tailwind-merge'
-import { CogsIcon } from '~/components/icons/CogsIcon'
import { ai } from './libraries'
const textStyles = `text-pink-600 dark:text-pink-500`
@@ -37,7 +36,7 @@ export const aiProject = {
},
{
title: 'Typed Tools & Media',
- icon:
You're on the waitlist!
diff --git a/src/routes/ds.index.tsx b/src/routes/ds.index.tsx
index 5bc99fda2..1acf93a3f 100644
--- a/src/routes/ds.index.tsx
+++ b/src/routes/ds.index.tsx
@@ -15,6 +15,7 @@ import {
Square,
Tag,
TextT,
+ Browser,
} from '@phosphor-icons/react'
import type { Icon } from '@phosphor-icons/react'
import { seo } from '~/utils/seo'
@@ -38,6 +39,7 @@ const SECTION_ICONS: Record = {
'/ds/collapsible': CaretUpDown,
'/ds/breadcrumbs': MapPinLine,
'/ds/cards': Stack,
+ '/ds/navbar': Browser,
}
export const Route = createFileRoute('/ds/')({
diff --git a/src/routes/ds.navbar.tsx b/src/routes/ds.navbar.tsx
new file mode 100644
index 000000000..60879a4e4
--- /dev/null
+++ b/src/routes/ds.navbar.tsx
@@ -0,0 +1,371 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import {
+ Moon,
+ ShoppingCart,
+ MagnifyingGlass,
+ List,
+ Sparkle,
+ Lifebuoy,
+ Users,
+ Path,
+} from '@phosphor-icons/react'
+import { seo } from '~/utils/seo'
+import { DsPage, DsSection } from '~/components/ds/DsKit'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { DiscordIcon } from '~/components/icons/DiscordIcon'
+import { MegaMenuItem } from '~/components/MegaMenuItem'
+
+export const Route = createFileRoute('/ds/navbar')({
+ component: NavbarPage,
+ head: () => ({
+ meta: seo({
+ title: 'Navbar | TanStack Design System',
+ description:
+ 'The global site navigation bar — anatomy, spacing tokens, and responsive behavior. Source: src/components/Navbar.tsx.',
+ }),
+ }),
+})
+
+const PRIMARY_NAV = [
+ 'Libraries',
+ 'Learn',
+ 'Community',
+ 'Tools',
+ 'Merch',
+ 'Support',
+]
+
+/**
+ * A static, non-fixed replica of the real site navbar for documentation.
+ *
+ * The live `Navbar` (src/components/Navbar.tsx) is a `fixed` layout organism
+ * that wraps the whole page and depends on router/auth/cart context, so it
+ * can't be rendered inline. This mirror uses the same production classes and
+ * the shared `--navbar-height` token so the anatomy stays true to the source.
+ *
+ * Responsiveness is driven by CONTAINER queries (`@min-[…]`) rather than the
+ * viewport, so it reflects the width of its `@container` wrapper — letting the
+ * preview show mobile / tablet / desktop states at any screen size. The
+ * breakpoints mirror the real navbar: primary nav appears at 900px, social
+ * links at 1120px.
+ */
+function NavbarAnatomy() {
+ return (
+
+ {/* Brand — the real landscape logo, theme-swapped like the live navbar */}
+
+ 
+
+
+
+ {/* Primary navigation — desktop only (≥ 900px) */}
+
+
+ {/* Utility cluster */}
+
+ {/* Social links — wide only (≥ 1120px) */}
+
+
+
+ )
+}
+
+const PREVIEW_SIZES = [
+ { key: 'auto', label: 'Auto', width: null },
+ { key: 'mobile', label: 'Mobile', width: 390 },
+ { key: 'ipad', label: 'iPad', width: 1024 },
+ { key: 'desktop', label: 'Desktop', width: 1440 },
+] as const
+
+type PreviewSizeKey = (typeof PREVIEW_SIZES)[number]['key']
+
+/**
+ * The Anatomy preview surface with a device-size toggle. "Auto" fills the
+ * available width, so the replica responds to the real screen as it resizes;
+ * Mobile / iPad / Desktop pin the container to a fixed width (scrolling if it
+ * overflows the frame). All sizing flows through the `@container` wrapper.
+ */
+function NavbarAnatomyPreview() {
+ const [size, setSize] = React.useState('auto')
+ const [available, setAvailable] = React.useState(0)
+ const trackRef = React.useRef(null)
+ const active = PREVIEW_SIZES.find((option) => option.key === size)!
+ const deviceWidth = active.width
+
+ // Measure the frame's inner width so wider device sizes can scale to fit.
+ React.useEffect(() => {
+ const el = trackRef.current
+ if (!el) return
+ const update = () => setAvailable(el.clientWidth)
+ update()
+ const observer = new ResizeObserver(update)
+ observer.observe(el)
+ return () => observer.disconnect()
+ }, [])
+
+ const scale =
+ deviceWidth && available > 0 && deviceWidth > available
+ ? available / deviceWidth
+ : 1
+
+ return (
+
+
+
+ {PREVIEW_SIZES.map((option) => {
+ const isActive = size === option.key
+ return (
+
+ )
+ })}
+
+
+ {deviceWidth
+ ? `${deviceWidth}px${scale < 1 ? ` · ${Math.round(scale * 100)}%` : ''}`
+ : 'Responsive · tracks screen'}
+
+
+
+
+
+ {deviceWidth ? (
+
+
+ {children}
+
+ )
+}
+
+function SpecRow({ label, value }: { label: string; value: React.ReactNode }) {
+ return (
+
+ {label}
+
+ {value}
+
+
+ )
+}
+
+function NavbarPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Logo mark and wordmark, linking home. Right-clicking opens the brand
+ context menu (logo assets, Brand Guide).
+
+
+ Libraries, Learn, Community, Tools, Merch, and Support — each a
+ hover/focus mega-menu. Collapses into the mobile menu below 900px.
+
+
+ Social links, theme toggle, cart, search, the AI dock, and auth
+ controls — plus the hamburger trigger on mobile.
+
+
+
+
+
+
+
+
+
+
+
+ Full primary navigation with mega-menu dropdowns; the hamburger is
+ hidden.
+
+
+ Social links join the utility cluster and region gaps widen for
+ extra breathing room.
+
+
+ Primary nav collapses to a hamburger that opens a full-width
+ collapsible menu below the bar.
+
+
+
+
+
+
+
+ src/components/Navbar.tsx
+
+
+ Mounted once in __root.tsx as{' '}
+
+ {'{children} '}
+
+ . Menu contents are defined in the{' '}
+ NAV_GROUPS config at the top
+ of the file.
+
+
+
+
+ )
+}
diff --git a/src/routes/ds.spinner.tsx b/src/routes/ds.spinner.tsx
index 3e78e2747..63988e118 100644
--- a/src/routes/ds.spinner.tsx
+++ b/src/routes/ds.spinner.tsx
@@ -1,6 +1,6 @@
import { createFileRoute } from '@tanstack/react-router'
import { seo } from '~/utils/seo'
-import { PalmSpinner, Spinner } from '~/components/ds/ui'
+import { Spinner } from '~/components/ds/ui'
import { ComponentPreview, DsPage, DsSection } from '~/components/ds/DsKit'
export const Route = createFileRoute('/ds/spinner')({
@@ -32,21 +32,6 @@ function SpinnerPage() {
-
)
}
diff --git a/src/routes/ds.typography.tsx b/src/routes/ds.typography.tsx
index 386f2bd4f..ad40c5cec 100644
--- a/src/routes/ds.typography.tsx
+++ b/src/routes/ds.typography.tsx
@@ -121,12 +121,47 @@ const GROUPS: Array = [
},
]
+const SEMANTIC_HEADINGS: Array<{ cls: string; alias: string }> = [
+ { cls: 'h1', alias: '= text-ds-heading-1' },
+ { cls: 'h2', alias: '= text-ds-heading-2' },
+ { cls: 'h3', alias: '= text-ds-heading-3' },
+ { cls: 'h4', alias: '= text-ds-heading-4' },
+ { cls: 'h5', alias: '= text-ds-heading-5' },
+ { cls: 'h6', alias: '= text-ds-heading-6' },
+]
+
function TypographyPage() {
return (
+
+
+
+
{GROUPS.map((group) => (
@@ -155,28 +190,28 @@ function TypographyPage() {
))}
-
-
-
- Browse the stack
-
-
-
- Every TanStack library, organized by what it does.
-
-
-
- {Object.entries(librariesByGroup).map(
- ([groupName, groupLibraries]) => (
-
@@ -516,69 +496,85 @@ function cubicAngle(
function WhyTanStackSection() {
return (
-
-
-
-
- Principles
-
-
-
- Why TanStack?
-
-
- Our libraries are built around real products and the developers
- shipping them.
-
+
+
+ {/* Lead-in header */}
+
+
+
+ Product principles
-
-
-
- {whyTanStackPrinciples.map((principle) => (
- -
-
-
-
- {principle.label}
-
-
- {principle.title}
-
-
-
- {principle.body}
-
-
-
-
- ))}
-
-
-
+
+ Why TanStack?
+
+
+ Our libraries are built around real products and the developers
+ shipping them
+
+
+ {/* Four distinct principle sections */}
+
+ {whyTanStackPrinciples.map((principle, index) => (
+ -
+
+
+
+ {String(index + 1).padStart(2, '0')}
+
+
+ {principle.label}
+
+
+ {principle.title}
+
+
+ {principle.body}
+
+
+
+ ))}
+
)
@@ -628,9 +624,9 @@ function FrameworkAdapterGraph({
return (
Type-safe client/server tools, provider-native tools, structured
diff --git a/src/libraries/config.tsx b/src/libraries/config.tsx
index 6b1ea17b4..d21a6219c 100644
--- a/src/libraries/config.tsx
+++ b/src/libraries/config.tsx
@@ -1,6 +1,5 @@
-import { MagicWand, Lightning } from '@phosphor-icons/react'
+import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
import { twMerge } from 'tailwind-merge'
-import { CogsIcon } from '~/components/icons/CogsIcon'
import { config } from './libraries'
const textStyles = 'text-black dark:text-gray-100'
@@ -45,7 +44,7 @@ export const configProject = {
},
{
title: 'Effortless Publication',
- icon:
Say goodbye to the complexities of code publishing. This package
diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx
index a3f3531ff..c46acaded 100644
--- a/src/libraries/db.tsx
+++ b/src/libraries/db.tsx
@@ -1,6 +1,5 @@
-import { Stack, Lightning } from '@phosphor-icons/react'
+import { Stack, Lightning, Gear } from '@phosphor-icons/react'
import { twMerge } from 'tailwind-merge'
-import { CogsIcon } from '~/components/icons/CogsIcon'
import { db } from './libraries'
const textStyles = `text-orange-600 dark:text-orange-500`
@@ -37,7 +36,7 @@ export const dbProject = {
},
{
title: 'Optimistic mutations',
- icon:
Batch and stage instant local changes across collections. Sync
diff --git a/src/libraries/devtools.tsx b/src/libraries/devtools.tsx
index feb674f8c..ab6c4390a 100644
--- a/src/libraries/devtools.tsx
+++ b/src/libraries/devtools.tsx
@@ -1,6 +1,5 @@
-import { MagicWand, Lightning } from '@phosphor-icons/react'
+import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
import { twMerge } from 'tailwind-merge'
-import { CogsIcon } from '~/components/icons/CogsIcon'
import { devtools } from './libraries'
const textStyles = 'text-black dark:text-gray-100'
@@ -42,7 +41,7 @@ export const devtoolsProject = {
},
{
title: 'Custom Devtools Support',
- icon:
Extend the devtools panel with your own custom devtools. The platform
diff --git a/src/libraries/form.tsx b/src/libraries/form.tsx
index 59f129514..d1a69c962 100644
--- a/src/libraries/form.tsx
+++ b/src/libraries/form.tsx
@@ -1,6 +1,5 @@
-import { MagicWand, Lightning } from '@phosphor-icons/react'
+import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
import { twMerge } from 'tailwind-merge'
-import { CogsIcon } from '~/components/icons/CogsIcon'
import { form } from './libraries'
const textStyles = 'text-yellow-600 dark:text-yellow-300'
@@ -71,7 +70,7 @@ export const formProject = {
},
{
title: 'Granular Reactive Performance',
- icon:
When it comes to performance, TanStack Form delivers amazing speed and
diff --git a/src/libraries/query.tsx b/src/libraries/query.tsx
index 295d61775..9994cdf6f 100644
--- a/src/libraries/query.tsx
+++ b/src/libraries/query.tsx
@@ -1,6 +1,5 @@
-import { MagicWand, Lightning } from '@phosphor-icons/react'
+import { MagicWand, Lightning, Gear } from '@phosphor-icons/react'
import { twMerge } from 'tailwind-merge'
-import { CogsIcon } from '~/components/icons/CogsIcon'
import { query } from './libraries'
const textStyles = 'text-red-500 dark:text-red-400'
@@ -110,7 +109,7 @@ export const queryProject = {
{
title: 'Extensible',
icon: (
-
TanStack table ships with excellent defaults to get you off the ground
diff --git a/src/libraries/virtual.tsx b/src/libraries/virtual.tsx
index fe90bcedf..dd592a06b 100644
--- a/src/libraries/virtual.tsx
+++ b/src/libraries/virtual.tsx
@@ -1,6 +1,5 @@
-import { PersonSimple, Lightning } from '@phosphor-icons/react'
+import { PersonSimple, Lightning, Gear } from '@phosphor-icons/react'
import { twMerge } from 'tailwind-merge'
-import { CogsIcon } from '~/components/icons/CogsIcon'
import { virtual } from './libraries'
const textStyles = 'text-violet-700 dark:text-violet-400'
@@ -72,7 +71,7 @@ export const virtualProject = {
},
{
title: 'Maximum Composability',
- icon:
With a single function/hook, you'll get limitless virtualization for{' '}
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 87c79e487..5c3b54cc7 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -69,6 +69,7 @@ import { Route as DsSpinnerRouteImport } from './routes/ds.spinner'
import { Route as DsShadowsRouteImport } from './routes/ds.shadows'
import { Route as DsSemanticRouteImport } from './routes/ds.semantic'
import { Route as DsPaletteRouteImport } from './routes/ds.palette'
+import { Route as DsNavbarRouteImport } from './routes/ds.navbar'
import { Route as DsInputsRouteImport } from './routes/ds.inputs'
import { Route as DsIconographyRouteImport } from './routes/ds.iconography'
import { Route as DsIconMigrationRouteImport } from './routes/ds.icon-migration'
@@ -481,6 +482,11 @@ const DsPaletteRoute = DsPaletteRouteImport.update({
path: '/palette',
getParentRoute: () => DsRoute,
} as any)
+const DsNavbarRoute = DsNavbarRouteImport.update({
+ id: '/navbar',
+ path: '/navbar',
+ getParentRoute: () => DsRoute,
+} as any)
const DsInputsRoute = DsInputsRouteImport.update({
id: '/inputs',
path: '/inputs',
@@ -1151,6 +1157,7 @@ export interface FileRoutesByFullPath {
'/ds/icon-migration': typeof DsIconMigrationRoute
'/ds/iconography': typeof DsIconographyRoute
'/ds/inputs': typeof DsInputsRoute
+ '/ds/navbar': typeof DsNavbarRoute
'/ds/palette': typeof DsPaletteRoute
'/ds/semantic': typeof DsSemanticRoute
'/ds/shadows': typeof DsShadowsRoute
@@ -1316,6 +1323,7 @@ export interface FileRoutesByTo {
'/ds/icon-migration': typeof DsIconMigrationRoute
'/ds/iconography': typeof DsIconographyRoute
'/ds/inputs': typeof DsInputsRoute
+ '/ds/navbar': typeof DsNavbarRoute
'/ds/palette': typeof DsPaletteRoute
'/ds/semantic': typeof DsSemanticRoute
'/ds/shadows': typeof DsShadowsRoute
@@ -1488,6 +1496,7 @@ export interface FileRoutesById {
'/ds/icon-migration': typeof DsIconMigrationRoute
'/ds/iconography': typeof DsIconographyRoute
'/ds/inputs': typeof DsInputsRoute
+ '/ds/navbar': typeof DsNavbarRoute
'/ds/palette': typeof DsPaletteRoute
'/ds/semantic': typeof DsSemanticRoute
'/ds/shadows': typeof DsShadowsRoute
@@ -1663,6 +1672,7 @@ export interface FileRouteTypes {
| '/ds/icon-migration'
| '/ds/iconography'
| '/ds/inputs'
+ | '/ds/navbar'
| '/ds/palette'
| '/ds/semantic'
| '/ds/shadows'
@@ -1828,6 +1838,7 @@ export interface FileRouteTypes {
| '/ds/icon-migration'
| '/ds/iconography'
| '/ds/inputs'
+ | '/ds/navbar'
| '/ds/palette'
| '/ds/semantic'
| '/ds/shadows'
@@ -1999,6 +2010,7 @@ export interface FileRouteTypes {
| '/ds/icon-migration'
| '/ds/iconography'
| '/ds/inputs'
+ | '/ds/navbar'
| '/ds/palette'
| '/ds/semantic'
| '/ds/shadows'
@@ -2612,6 +2624,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof DsPaletteRouteImport
parentRoute: typeof DsRoute
}
+ '/ds/navbar': {
+ id: '/ds/navbar'
+ path: '/navbar'
+ fullPath: '/ds/navbar'
+ preLoaderRoute: typeof DsNavbarRouteImport
+ parentRoute: typeof DsRoute
+ }
'/ds/inputs': {
id: '/ds/inputs'
path: '/inputs'
@@ -3638,6 +3657,7 @@ interface DsRouteChildren {
DsIconMigrationRoute: typeof DsIconMigrationRoute
DsIconographyRoute: typeof DsIconographyRoute
DsInputsRoute: typeof DsInputsRoute
+ DsNavbarRoute: typeof DsNavbarRoute
DsPaletteRoute: typeof DsPaletteRoute
DsSemanticRoute: typeof DsSemanticRoute
DsShadowsRoute: typeof DsShadowsRoute
@@ -3659,6 +3679,7 @@ const DsRouteChildren: DsRouteChildren = {
DsIconMigrationRoute: DsIconMigrationRoute,
DsIconographyRoute: DsIconographyRoute,
DsInputsRoute: DsInputsRoute,
+ DsNavbarRoute: DsNavbarRoute,
DsPaletteRoute: DsPaletteRoute,
DsSemanticRoute: DsSemanticRoute,
DsShadowsRoute: DsShadowsRoute,
diff --git a/src/routes/ads.tsx b/src/routes/ads.tsx
index e66836bc1..ae5a4fc61 100644
--- a/src/routes/ads.tsx
+++ b/src/routes/ads.tsx
@@ -8,7 +8,7 @@ import { useToast } from '~/components/ToastProvider'
import { useEffect, useState } from 'react'
import { setInterestedInHidingAds } from '~/utils/users.functions'
import { GithubIcon } from '~/components/icons/GithubIcon'
-import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
+import { CheckCircle } from '@phosphor-icons/react'
import { GoogleIcon } from '~/components/icons/GoogleIcon'
export const Route = createFileRoute('/ads')({
@@ -258,7 +258,7 @@ function OptInButton() {
return (
You're on the waitlist!
diff --git a/src/routes/ds.index.tsx b/src/routes/ds.index.tsx
index 5bc99fda2..1acf93a3f 100644
--- a/src/routes/ds.index.tsx
+++ b/src/routes/ds.index.tsx
@@ -15,6 +15,7 @@ import {
Square,
Tag,
TextT,
+ Browser,
} from '@phosphor-icons/react'
import type { Icon } from '@phosphor-icons/react'
import { seo } from '~/utils/seo'
@@ -38,6 +39,7 @@ const SECTION_ICONS: Record
-
You're on the waitlist!
diff --git a/src/routes/ds.index.tsx b/src/routes/ds.index.tsx
index 5bc99fda2..1acf93a3f 100644
--- a/src/routes/ds.index.tsx
+++ b/src/routes/ds.index.tsx
@@ -15,6 +15,7 @@ import {
Square,
Tag,
TextT,
+ Browser,
} from '@phosphor-icons/react'
import type { Icon } from '@phosphor-icons/react'
import { seo } from '~/utils/seo'
@@ -38,6 +39,7 @@ const SECTION_ICONS: Record = {
'/ds/collapsible': CaretUpDown,
'/ds/breadcrumbs': MapPinLine,
'/ds/cards': Stack,
+ '/ds/navbar': Browser,
}
export const Route = createFileRoute('/ds/')({
diff --git a/src/routes/ds.navbar.tsx b/src/routes/ds.navbar.tsx
new file mode 100644
index 000000000..60879a4e4
--- /dev/null
+++ b/src/routes/ds.navbar.tsx
@@ -0,0 +1,371 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import {
+ Moon,
+ ShoppingCart,
+ MagnifyingGlass,
+ List,
+ Sparkle,
+ Lifebuoy,
+ Users,
+ Path,
+} from '@phosphor-icons/react'
+import { seo } from '~/utils/seo'
+import { DsPage, DsSection } from '~/components/ds/DsKit'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { DiscordIcon } from '~/components/icons/DiscordIcon'
+import { MegaMenuItem } from '~/components/MegaMenuItem'
+
+export const Route = createFileRoute('/ds/navbar')({
+ component: NavbarPage,
+ head: () => ({
+ meta: seo({
+ title: 'Navbar | TanStack Design System',
+ description:
+ 'The global site navigation bar — anatomy, spacing tokens, and responsive behavior. Source: src/components/Navbar.tsx.',
+ }),
+ }),
+})
+
+const PRIMARY_NAV = [
+ 'Libraries',
+ 'Learn',
+ 'Community',
+ 'Tools',
+ 'Merch',
+ 'Support',
+]
+
+/**
+ * A static, non-fixed replica of the real site navbar for documentation.
+ *
+ * The live `Navbar` (src/components/Navbar.tsx) is a `fixed` layout organism
+ * that wraps the whole page and depends on router/auth/cart context, so it
+ * can't be rendered inline. This mirror uses the same production classes and
+ * the shared `--navbar-height` token so the anatomy stays true to the source.
+ *
+ * Responsiveness is driven by CONTAINER queries (`@min-[…]`) rather than the
+ * viewport, so it reflects the width of its `@container` wrapper — letting the
+ * preview show mobile / tablet / desktop states at any screen size. The
+ * breakpoints mirror the real navbar: primary nav appears at 900px, social
+ * links at 1120px.
+ */
+function NavbarAnatomy() {
+ return (
+
+ {/* Brand — the real landscape logo, theme-swapped like the live navbar */}
+
+
+
+
+
+ {/* Primary navigation — desktop only (≥ 900px) */}
+
+
+ {/* Utility cluster */}
+
+ {/* Social links — wide only (≥ 1120px) */}
+
+
+
+ )
+}
+
+const PREVIEW_SIZES = [
+ { key: 'auto', label: 'Auto', width: null },
+ { key: 'mobile', label: 'Mobile', width: 390 },
+ { key: 'ipad', label: 'iPad', width: 1024 },
+ { key: 'desktop', label: 'Desktop', width: 1440 },
+] as const
+
+type PreviewSizeKey = (typeof PREVIEW_SIZES)[number]['key']
+
+/**
+ * The Anatomy preview surface with a device-size toggle. "Auto" fills the
+ * available width, so the replica responds to the real screen as it resizes;
+ * Mobile / iPad / Desktop pin the container to a fixed width (scrolling if it
+ * overflows the frame). All sizing flows through the `@container` wrapper.
+ */
+function NavbarAnatomyPreview() {
+ const [size, setSize] = React.useState('auto')
+ const [available, setAvailable] = React.useState(0)
+ const trackRef = React.useRef(null)
+ const active = PREVIEW_SIZES.find((option) => option.key === size)!
+ const deviceWidth = active.width
+
+ // Measure the frame's inner width so wider device sizes can scale to fit.
+ React.useEffect(() => {
+ const el = trackRef.current
+ if (!el) return
+ const update = () => setAvailable(el.clientWidth)
+ update()
+ const observer = new ResizeObserver(update)
+ observer.observe(el)
+ return () => observer.disconnect()
+ }, [])
+
+ const scale =
+ deviceWidth && available > 0 && deviceWidth > available
+ ? available / deviceWidth
+ : 1
+
+ return (
+
+
+
+ {PREVIEW_SIZES.map((option) => {
+ const isActive = size === option.key
+ return (
+
+ )
+ })}
+
+
+ {deviceWidth
+ ? `${deviceWidth}px${scale < 1 ? ` · ${Math.round(scale * 100)}%` : ''}`
+ : 'Responsive · tracks screen'}
+
+
+
+
+
+ {deviceWidth ? (
+
+
+ {children}
+
+ )
+}
+
+function SpecRow({ label, value }: { label: string; value: React.ReactNode }) {
+ return (
+
+ {label}
+
+ {value}
+
+
+ )
+}
+
+function NavbarPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Logo mark and wordmark, linking home. Right-clicking opens the brand
+ context menu (logo assets, Brand Guide).
+
+
+ Libraries, Learn, Community, Tools, Merch, and Support — each a
+ hover/focus mega-menu. Collapses into the mobile menu below 900px.
+
+
+ Social links, theme toggle, cart, search, the AI dock, and auth
+ controls — plus the hamburger trigger on mobile.
+
+
+
+
+
+
+
+
+
+
+
+ Full primary navigation with mega-menu dropdowns; the hamburger is
+ hidden.
+
+
+ Social links join the utility cluster and region gaps widen for
+ extra breathing room.
+
+
+ Primary nav collapses to a hamburger that opens a full-width
+ collapsible menu below the bar.
+
+
+
+
+
+
+
+ src/components/Navbar.tsx
+
+
+ Mounted once in __root.tsx as{' '}
+
+ {'{children} '}
+
+ . Menu contents are defined in the{' '}
+ NAV_GROUPS config at the top
+ of the file.
+
+
+
+
+ )
+}
diff --git a/src/routes/ds.spinner.tsx b/src/routes/ds.spinner.tsx
index 3e78e2747..63988e118 100644
--- a/src/routes/ds.spinner.tsx
+++ b/src/routes/ds.spinner.tsx
@@ -1,6 +1,6 @@
import { createFileRoute } from '@tanstack/react-router'
import { seo } from '~/utils/seo'
-import { PalmSpinner, Spinner } from '~/components/ds/ui'
+import { Spinner } from '~/components/ds/ui'
import { ComponentPreview, DsPage, DsSection } from '~/components/ds/DsKit'
export const Route = createFileRoute('/ds/spinner')({
@@ -32,21 +32,6 @@ function SpinnerPage() {
-
)
}
diff --git a/src/routes/ds.typography.tsx b/src/routes/ds.typography.tsx
index 386f2bd4f..ad40c5cec 100644
--- a/src/routes/ds.typography.tsx
+++ b/src/routes/ds.typography.tsx
@@ -121,12 +121,47 @@ const GROUPS: Array = [
},
]
+const SEMANTIC_HEADINGS: Array<{ cls: string; alias: string }> = [
+ { cls: 'h1', alias: '= text-ds-heading-1' },
+ { cls: 'h2', alias: '= text-ds-heading-2' },
+ { cls: 'h3', alias: '= text-ds-heading-3' },
+ { cls: 'h4', alias: '= text-ds-heading-4' },
+ { cls: 'h5', alias: '= text-ds-heading-5' },
+ { cls: 'h6', alias: '= text-ds-heading-6' },
+]
+
function TypographyPage() {
return (
+
+
+
+
{GROUPS.map((group) => (
@@ -155,28 +190,28 @@ function TypographyPage() {
))}
-
-
-
- Browse the stack
-
-
-
- Every TanStack library, organized by what it does.
-
-
-
- {Object.entries(librariesByGroup).map(
- ([groupName, groupLibraries]) => (
-
@@ -516,69 +496,85 @@ function cubicAngle(
function WhyTanStackSection() {
return (
-
-
-
-
- Principles
-
-
-
- Why TanStack?
-
-
- Our libraries are built around real products and the developers
- shipping them.
-
+
+
+ {/* Lead-in header */}
+
+
+
+ Product principles
-
-
-
- {whyTanStackPrinciples.map((principle) => (
- -
-
-
-
- {principle.label}
-
-
- {principle.title}
-
-
-
- {principle.body}
-
-
-
-
- ))}
-
-
-
+
+ Why TanStack?
+
+
+ Our libraries are built around real products and the developers
+ shipping them
+
+
+ {/* Four distinct principle sections */}
+
+ {whyTanStackPrinciples.map((principle, index) => (
+ -
+
+
+
+ {String(index + 1).padStart(2, '0')}
+
+
+ {principle.label}
+
+
+ {principle.title}
+
+
+ {principle.body}
+
+
+
+ ))}
+
)
@@ -628,9 +624,9 @@ function FrameworkAdapterGraph({
return (
+ {/* Brand — the real landscape logo, theme-swapped like the live navbar */}
+
+ )
+}
+
+const PREVIEW_SIZES = [
+ { key: 'auto', label: 'Auto', width: null },
+ { key: 'mobile', label: 'Mobile', width: 390 },
+ { key: 'ipad', label: 'iPad', width: 1024 },
+ { key: 'desktop', label: 'Desktop', width: 1440 },
+] as const
+
+type PreviewSizeKey = (typeof PREVIEW_SIZES)[number]['key']
+
+/**
+ * The Anatomy preview surface with a device-size toggle. "Auto" fills the
+ * available width, so the replica responds to the real screen as it resizes;
+ * Mobile / iPad / Desktop pin the container to a fixed width (scrolling if it
+ * overflows the frame). All sizing flows through the `@container` wrapper.
+ */
+function NavbarAnatomyPreview() {
+ const [size, setSize] = React.useState
+
+
+
+
+ {/* Primary navigation — desktop only (≥ 900px) */}
+
+
+ {/* Utility cluster */}
+
+
+ 
+
+ {/* Social links — wide only (≥ 1120px) */}
+
+
+
+ )
+}
+
+function RegionCard({
+ index,
+ title,
+ children,
+}: {
+ index: number
+ title: string
+ children: React.ReactNode
+}) {
+ return (
+
+
+
+
+ {PREVIEW_SIZES.map((option) => {
+ const isActive = size === option.key
+ return (
+
+ )
+ })}
+
+
+ {deviceWidth
+ ? `${deviceWidth}px${scale < 1 ? ` · ${Math.round(scale * 100)}%` : ''}`
+ : 'Responsive · tracks screen'}
+
+
+
+
+ {deviceWidth ? (
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ )
+}
+
+function SpecRow({ label, value }: { label: string; value: React.ReactNode }) {
+ return (
+
+
+ {index}
+
+
+ {title}
+
+
+ {children}
+
+ {label}
+
+ )
+}
+
+function NavbarPage() {
+ return (
+
+ {value}
+
+
+
+
+
+
+
+ Logo mark and wordmark, linking home. Right-clicking opens the brand
+ context menu (logo assets, Brand Guide).
+
+
+ Libraries, Learn, Community, Tools, Merch, and Support — each a
+ hover/focus mega-menu. Collapses into the mobile menu below 900px.
+
+
+ Social links, theme toggle, cart, search, the AI dock, and auth
+ controls — plus the hamburger trigger on mobile.
+
+
+
+
+
+
+ Full primary navigation with mega-menu dropdowns; the hamburger is
+ hidden.
+
+
+ Social links join the utility cluster and region gaps widen for
+ extra breathing room.
+
+
+ Primary nav collapses to a hamburger that opens a full-width
+ collapsible menu below the bar.
+
+
+
+
+
+ src/components/Navbar.tsx
+
+
+ Mounted once in __root.tsx as{' '}
+
+ {'
+ . Menu contents are defined in the{' '}
+ NAV_GROUPS config at the top
+ of the file.
+
+
+
@@ -155,28 +190,28 @@ function TypographyPage() {
))}
-
-
@@ -516,69 +496,85 @@ function cubicAngle(
function WhyTanStackSection() {
return (
-
-
+ {SEMANTIC_HEADINGS.map((h) => (
+
@@ -195,10 +230,14 @@ function FamilyCard({
note: string
}) {
return (
-
+
+ Type-safe by default
+
+
+
+ .{h.cls}
+
+
+ {h.alias}
+
+
+
+ ))}
-
- {name}
- {token}
-
+
+
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 8db0b042c..44e50515e 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,13 +2,19 @@ import * as React from 'react'
import { ClientOnly, Link, createFileRoute } from '@tanstack/react-router'
import discordImage from '~/images/discord-logo-white.svg'
-import { librariesByGroup, librariesGroupNamesMap, Library } from '~/libraries'
import { BrandContextMenu } from '~/components/BrandContextMenu'
import { OptimizedImage } from '~/components/OptimizedImage'
-import { groupToSlug } from '~/components/stack/stack-categories'
import { twMerge } from 'tailwind-merge'
-import { ArrowRight, Play } from '@phosphor-icons/react'
+import {
+ ArrowRight,
+ Code,
+ Stack,
+ Shield,
+ Lightning,
+ Play,
+ type Icon,
+} from '@phosphor-icons/react'
import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
import { HomeApplicationStarter } from '~/components/home/HomeApplicationStarter'
import { HomeCommunitySection } from '~/components/home/HomeCommunitySection'
@@ -154,41 +160,6 @@ function Index() {
+ {name}
+
+
+ {token}
+
+
{note}
-
-
- - - Browse the stack - -
-- Every TanStack library, organized by what it does. -
- -
- {Object.entries(librariesByGroup).map(
- ([groupName, groupLibraries]) => (
-
-
-
-
-
-
-
- Principles -
-
-
+
)
@@ -628,9 +624,9 @@ function FrameworkAdapterGraph({
return (
- Why TanStack? -
-- Our libraries are built around real products and the developers - shipping them. -
+
+ {/* Lead-in header */}
+
+
-
-
+
+ Product principles
- -
- {whyTanStackPrinciples.map((principle) => (
-
-
- ----
- {principle.label} -
-- {principle.title} -
-- {principle.body} -
----
- ))}
-
+
+
+ {/* Four distinct principle sections */}
+ + Why TanStack? +
++ Our libraries are built around real products and the developers + shipping them +
-
+ {whyTanStackPrinciples.map((principle, index) => (
+
-
+
+
+ + + + {String(index + 1).padStart(2, '0')} + + + {principle.label} +
++ {principle.title} +
++ {principle.body} +
+ ++
+ ))}
+