Repository navigation
TanStackRouterDevtoolsPanel Is missing a css variables and appears broken #6196
Description
Which project does this relate to?
Router
Describe the bug
The devtools panel is looking a little rough without --tsrd-font-size set to 16px.
Further more, I think the devtools should mirror the API of tanstack query's devtools panel which seems a lot more polished than the router one. (missing onClose, but button to dismiss is always visible.)
Your Example Website or App
https://tanstack.com/router/latest/docs/framework/react/examples/basic-devtools-panel
Steps to Reproduce the Bug or Issue
You can just copy this example.
https://tanstack.com/router/latest/docs/framework/react/examples/basic-devtools-panel
To see the correct styling:
- wrap the devtool in a div with a ref
- add the following code to the component:
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
ref.current?.style.setProperty('--tsrd-font-size', '16px')
});
Expected behavior
I expect to see the same styling while using the panel as I would if I was using the "simple devtool"
Screenshots or Videos
No response
Platform
- Router / Start Version: [e.g. 1.121.0]
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Browser Version: [e.g. 91.1]
- Bundler: [e.g. vite]
- Bundler Version: [e.g. 7.0.0]
Additional context
No response
Activity
coderabbitai commentedon Dec 23, 2025
📝 CodeRabbit Plan Mode
Generate an implementation plan and prompts that you can use with your favorite coding agent.
Examples
🔗 Related PRs
TanStack/query#9625 - fix(query-devtools): add code element style to prevent devtools panel oscillating [merged]
#5140 - fix(router-devtools-core): add copy to clipboard for search params object [merged]
#5410 - feat(devtools-core): add history tab [merged]
#5435 - refactor: export devtools options type [merged]
#5819 - chore: fix devtools dependeicies [merged]
👤 Suggested Assignees
🧪 Issue enrichment is currently in open beta.
You can configure auto-planning by selecting labels in the issue_enrichment configuration.
To disable automatic issue enrichment, add the following to your
.coderabbit.yaml:💬 Have feedback or questions? Drop into our discord or schedule a call!