diff --git a/packages/devtools/src/components/tab-content.tsx b/packages/devtools/src/components/tab-content.tsx
index 02e1378a..085fca9f 100644
--- a/packages/devtools/src/components/tab-content.tsx
+++ b/packages/devtools/src/components/tab-content.tsx
@@ -1,14 +1,15 @@
import { createMemo } from 'solid-js'
-import { useDevtoolsState } from '../context/use-devtools-context'
-import { tabs } from '../tabs'
+import { useDevtoolsSettings, useDevtoolsState } from '../context/use-devtools-context'
+import { getTabs } from '../tabs'
import { useStyles } from '../styles/use-styles'
import type { JSX } from 'solid-js'
export const TabContent = () => {
const { state } = useDevtoolsState()
+ const { settings } = useDevtoolsSettings()
const styles = useStyles()
const component = createMemo<(() => JSX.Element) | null>(
- () => tabs.find((t) => t.id === state().activeTab)?.component || null,
+ () => getTabs(settings()).find((t) => t.id === state().activeTab)?.component || null,
)
return
{component()?.()}
diff --git a/packages/devtools/src/components/tabs.tsx b/packages/devtools/src/components/tabs.tsx
index bab30fbd..f0c6acbf 100644
--- a/packages/devtools/src/components/tabs.tsx
+++ b/packages/devtools/src/components/tabs.tsx
@@ -2,9 +2,9 @@ import clsx from 'clsx'
import { For } from 'solid-js'
import { PiP, X } from '@tanstack/devtools-ui/icons'
import { useStyles } from '../styles/use-styles'
-import { useDevtoolsState } from '../context/use-devtools-context'
+import { useDevtoolsState, useDevtoolsSettings } from '../context/use-devtools-context'
import { useDrawContext } from '../context/draw-context'
-import { tabs } from '../tabs'
+import { getTabs } from '../tabs'
import { usePiPWindow } from '../context/pip-context'
interface TabsProps {
@@ -14,6 +14,7 @@ interface TabsProps {
export const Tabs = (props: TabsProps) => {
const styles = useStyles()
const { state, setState } = useDevtoolsState()
+ const { settings } = useDevtoolsSettings()
const pipWindow = usePiPWindow()
const handleDetachment = () => {
pipWindow().requestPipWindow(
@@ -24,7 +25,7 @@ export const Tabs = (props: TabsProps) => {
return (
-
+
{(tab) => (