Custom Trigger Component for devtools

[akshat-OwO]

🎯 Changes

Custom Trigger Component Support

• Added an optional triggerComponent property to the devtools configuration, allowing users to specify a custom function or React element to render the devtools trigger. This replaces the default trigger button if provided. (packages/devtools/src/context/devtools-store.ts, packages/react-devtools/src/devtools.tsx)
• Updated the trigger rendering logic in Trigger to check for a custom trigger component and render it via a container reference if present. (packages/devtools/src/components/trigger.tsx)

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

[changeset-bot]

🦋 Changeset detected

Latest commit: 1cc9a12

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@tanstack/react-devtools	Minor
@tanstack/devtools	Minor
@tanstack/solid-devtools	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[maastrich]

Not blocking this pr but this partially answers to the problem of custom trigger, we cannot control where it will end up, I would have prefer something like a hook or an event emitter to open/close the devtools pannel so I can put it anywhere I want (in my case I want it not floating within a sidebar menu)

Both are not incompatible

[AlemTuzlak]

I would do this a bit differently, I would still use the button, and have this div inside of it conditionally rendered with a show, that way you don't have to implement the positions etc yourself, you would only provide the theme to the button and that's it, the rest is handled by the devtools

[AlemTuzlak]

@maastrich That would be a whole different feature IMO, so you want to be able to open/close devtools somewhere in your code without using the trigger from the devtools?

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 1cc9a12

Command	Status	Duration	Result
nx affected --targets=test:format,test:eslint,t...	✅ Succeeded	48s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	8s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-30 12:40:08 UTC

[pkg-pr-new]

More templates

• @tanstack/devtools-example-react-basic
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• @tanstack/devtools-example-react-time-travel
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-solid-start
• ssr

@tanstack/devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools@228

@tanstack/devtools-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-client@228

@tanstack/devtools-ui

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-ui@228

@tanstack/devtools-utils

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@228

@tanstack/devtools-vite

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-vite@228

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-bus@228

@tanstack/devtools-event-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@228

@tanstack/react-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@228

@tanstack/solid-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/solid-devtools@228

commit: 1cc9a12