diff --git a/.changeset/solid-hook-naming-react-compiler.md b/.changeset/solid-hook-naming-react-compiler.md
new file mode 100644
index 00000000..0785e0d3
--- /dev/null
+++ b/.changeset/solid-hook-naming-react-compiler.md
@@ -0,0 +1,13 @@
+---
+'@tanstack/devtools-ui': minor
+'@tanstack/devtools': patch
+'@tanstack/devtools-a11y': patch
+---
+
+fix: rename Solid `use*` primitives to `create*` so React Compiler doesn't transform them
+
+The devtools packages are written in Solid but used React-style naming (`useStyles`, `useTheme`, `useDevtoolsState`, …) for their custom primitives. When an app enables React Compiler, the compiler matches the `use*` naming convention and transforms/optimizes this Solid code as if it were React, breaking the panel (it is Solid JSX, not React).
+
+All custom Solid primitives in `@tanstack/devtools`, `@tanstack/devtools-ui`, and `@tanstack/devtools-a11y` are renamed from `use*` to `create*`, and Solid's own `useContext` / `@solid-primitives` `useKeyDownList` are imported under non-`use` aliases (`getContext`, `getKeyDownList`).
+
+Breaking for `@tanstack/devtools-ui`: the exported `useTheme` is renamed to `createTheme`.
diff --git a/packages/devtools-a11y/src/core/components/IssueCard.tsx b/packages/devtools-a11y/src/core/components/IssueCard.tsx
index 8fb8db85..4420616d 100644
--- a/packages/devtools-a11y/src/core/components/IssueCard.tsx
+++ b/packages/devtools-a11y/src/core/components/IssueCard.tsx
@@ -2,7 +2,7 @@
 
 import { For, Show } from 'solid-js'
 import { Button } from '@tanstack/devtools-ui'
-import { useStyles } from '../styles/styles'
+import { createStyles } from '../styles/styles'
 
 // types
 import type { A11yIssue, SeverityThreshold } from '../types/types'
@@ -17,7 +17,7 @@ interface A11yIssueCardProps {
 
 export function A11yIssueCard(props: A11yIssueCardProps) {
   const selector = () => props.issue.nodes[0]?.selector || 'unknown'
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div
diff --git a/packages/devtools-a11y/src/core/components/IssueList.tsx b/packages/devtools-a11y/src/core/components/IssueList.tsx
index 39266bb4..5552785a 100644
--- a/packages/devtools-a11y/src/core/components/IssueList.tsx
+++ b/packages/devtools-a11y/src/core/components/IssueList.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource solid-js */
 
 import { For, Show } from 'solid-js'
-import { useAllyContext } from '../contexts/allyContext'
+import { createAllyContext } from '../contexts/allyContext'
 import {
   SEVERITY_LABELS,
   clearHighlights,
@@ -10,7 +10,7 @@ import {
   scrollToElement,
 } from '../utils/ui.utils'
 import { IMPACTS } from '../utils/ally-audit.utils'
-import { useStyles } from '../styles/styles'
+import { createStyles } from '../styles/styles'
 import { A11yIssueCard } from './IssueCard'
 
 // types
@@ -24,8 +24,8 @@ export function A11yIssueList(props: A11yIssueListProps) {
   const [selectedIssueId, setSelectedIssueId] = props.selectedIssueSignal
 
   // hooks
-  const styles = useStyles()
-  const ally = useAllyContext()
+  const styles = createStyles()
+  const ally = createAllyContext()
 
   // handlers
   const handleIssueClick = (issueId: string) => {
diff --git a/packages/devtools-a11y/src/core/components/Settings.tsx b/packages/devtools-a11y/src/core/components/Settings.tsx
index 71a3bd43..943d7c6e 100644
--- a/packages/devtools-a11y/src/core/components/Settings.tsx
+++ b/packages/devtools-a11y/src/core/components/Settings.tsx
@@ -3,8 +3,8 @@
 import { For, Show, createMemo, createSignal } from 'solid-js'
 import { Button, Input, Select } from '@tanstack/devtools-ui'
 import { getAvailableRules } from '../utils/ally-audit.utils'
-import { useAllyContext } from '../contexts/allyContext'
-import { CATEGORIES, CATEGORY_LABELS, useStyles } from '../styles/styles'
+import { createAllyContext } from '../contexts/allyContext'
+import { CATEGORIES, CATEGORY_LABELS, createStyles } from '../styles/styles'
 
 // types
 import type {
@@ -18,8 +18,8 @@ interface A11ySettingsOverlayProps {
 }
 
 export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
-  const { config, setConfig } = useAllyContext()
-  const styles = useStyles()
+  const { config, setConfig } = createAllyContext()
+  const styles = createStyles()
 
   const disabledRulesSet = createMemo(() => new Set(config.disabledRules))
   const availableRules = createMemo(() => getAvailableRules())
diff --git a/packages/devtools-a11y/src/core/components/Shell.tsx b/packages/devtools-a11y/src/core/components/Shell.tsx
index d049ae71..f5ed7970 100644
--- a/packages/devtools-a11y/src/core/components/Shell.tsx
+++ b/packages/devtools-a11y/src/core/components/Shell.tsx
@@ -2,18 +2,18 @@
 
 import { Match, Show, Switch, createMemo, createSignal } from 'solid-js'
 import { Button, Header, MainPanel } from '@tanstack/devtools-ui'
-import { useAllyContext } from '../contexts/allyContext'
+import { createAllyContext } from '../contexts/allyContext'
 import { RULE_SET_LABELS, SEVERITY_LABELS } from '../utils/ui.utils'
-import { useStyles } from '../styles/styles'
+import { createStyles } from '../styles/styles'
 import { A11yIssueList } from './IssueList'
 import { A11ySettingsOverlay } from './Settings'
 
 export function Shell() {
-  const styles = useStyles()
+  const styles = createStyles()
 
   // ally context
   const { filteredIssues, allyResult, config, setConfig, triggerAllyScan } =
-    useAllyContext()
+    createAllyContext()
 
   // ui state
   const selectedIssueSignal = createSignal<string>('')
diff --git a/packages/devtools-a11y/src/core/contexts/allyContext.tsx b/packages/devtools-a11y/src/core/contexts/allyContext.tsx
index c6abc8c9..920eae9c 100644
--- a/packages/devtools-a11y/src/core/contexts/allyContext.tsx
+++ b/packages/devtools-a11y/src/core/contexts/allyContext.tsx
@@ -5,7 +5,7 @@ import {
   createEffect,
   createMemo,
   createSignal,
-  useContext,
+  useContext as getContext,
 } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { filterIssuesAboveThreshold, runAudit } from '../utils/ally-audit.utils'
@@ -24,7 +24,7 @@ import type { ParentComponent } from 'solid-js'
 // context state
 //
 
-function useAllyValue() {
+function createAllyValue() {
   const [config, setConfig] =
     createStore<Required<A11yPluginOptions>>(mergeConfig())
 
@@ -89,7 +89,7 @@ function useAllyValue() {
   }
 }
 
-type ContextType = ReturnType<typeof useAllyValue>
+type ContextType = ReturnType<typeof createAllyValue>
 
 //
 // context
@@ -100,18 +100,18 @@ const AllyContext = createContext<ContextType | null>(null)
 type AllyProviderProps = {}
 
 export const AllyProvider: ParentComponent<AllyProviderProps> = (props) => {
-  const value = useAllyValue()
+  const value = createAllyValue()
 
   return (
     <AllyContext.Provider value={value}>{props.children}</AllyContext.Provider>
   )
 }
 
-export function useAllyContext() {
-  const context = useContext(AllyContext)
+export function createAllyContext() {
+  const context = getContext(AllyContext)
 
   if (context === null) {
-    throw new Error('useAllyContext must be used within an AllyProvider')
+    throw new Error('createAllyContext must be used within an AllyProvider')
   }
 
   return context
diff --git a/packages/devtools-a11y/src/core/styles/styles.ts b/packages/devtools-a11y/src/core/styles/styles.ts
index 64b40104..d7d41e46 100644
--- a/packages/devtools-a11y/src/core/styles/styles.ts
+++ b/packages/devtools-a11y/src/core/styles/styles.ts
@@ -1,5 +1,5 @@
 import * as goober from 'goober'
-import { useTheme } from '@tanstack/devtools-ui'
+import { createTheme } from '@tanstack/devtools-ui'
 import { createMemo } from 'solid-js'
 
 import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
@@ -548,8 +548,8 @@ function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
   }
 }
 
-export function useStyles() {
-  const { theme } = useTheme()
+export function createStyles() {
+  const { theme } = createTheme()
   const styles = createMemo(() => createA11yPanelStyles(theme()))
 
   return styles
diff --git a/packages/devtools-ui/src/components/button.tsx b/packages/devtools-ui/src/components/button.tsx
index b96b453c..f292cdc6 100644
--- a/packages/devtools-ui/src/components/button.tsx
+++ b/packages/devtools-ui/src/components/button.tsx
@@ -1,6 +1,6 @@
 import { createMemo } from 'solid-js'
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 // types
 import type { JSX } from 'solid-js'
@@ -20,7 +20,7 @@ type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
   className?: string
 }
 export function Button(props: ButtonProps) {
-  const styles = useStyles()
+  const styles = createStyles()
 
   const classes = createMemo(() => {
     const variant = props.variant || 'primary'
diff --git a/packages/devtools-ui/src/components/checkbox.tsx b/packages/devtools-ui/src/components/checkbox.tsx
index de16270e..d87a4efc 100644
--- a/packages/devtools-ui/src/components/checkbox.tsx
+++ b/packages/devtools-ui/src/components/checkbox.tsx
@@ -1,5 +1,5 @@
 import { createSignal } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 interface CheckboxProps {
   label?: string
@@ -9,7 +9,7 @@ interface CheckboxProps {
 }
 
 export function Checkbox(props: CheckboxProps) {
-  const styles = useStyles()
+  const styles = createStyles()
   const [isChecked, setIsChecked] = createSignal(props.checked || false)
 
   const handleChange = (e: Event) => {
diff --git a/packages/devtools-ui/src/components/header.tsx b/packages/devtools-ui/src/components/header.tsx
index 29b23aa0..5f52f0c7 100644
--- a/packages/devtools-ui/src/components/header.tsx
+++ b/packages/devtools-ui/src/components/header.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 export function Header({
@@ -7,7 +7,7 @@ export function Header({
   class: className,
   ...rest
 }: JSX.IntrinsicElements['header']) {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <header
       class={clsx(styles().header.row, 'tsqd-header', className)}
@@ -30,7 +30,7 @@ export function HeaderLogo({
   }
   onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>
 }) {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <div class={styles().header.logoAndToggleContainer}>
       <button class={clsx(styles().header.logo)} onClick={onClick}>
diff --git a/packages/devtools-ui/src/components/input.tsx b/packages/devtools-ui/src/components/input.tsx
index 8868d073..a256162f 100644
--- a/packages/devtools-ui/src/components/input.tsx
+++ b/packages/devtools-ui/src/components/input.tsx
@@ -1,5 +1,5 @@
 import { createSignal } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 interface InputProps {
   label?: string
@@ -11,7 +11,7 @@ interface InputProps {
 }
 
 export function Input(props: InputProps) {
-  const styles = useStyles()
+  const styles = createStyles()
   const [val, setVal] = createSignal(props.value || '')
 
   const handleChange = (e: Event) => {
diff --git a/packages/devtools-ui/src/components/logo.tsx b/packages/devtools-ui/src/components/logo.tsx
index d1d46682..6436dccc 100644
--- a/packages/devtools-ui/src/components/logo.tsx
+++ b/packages/devtools-ui/src/components/logo.tsx
@@ -1,9 +1,9 @@
 import { createUniqueId } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 export function TanStackLogo() {
   const id = createUniqueId()
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <svg
       class={styles().logo}
diff --git a/packages/devtools-ui/src/components/main-panel.tsx b/packages/devtools-ui/src/components/main-panel.tsx
index 64b97ffc..d72fa77d 100644
--- a/packages/devtools-ui/src/components/main-panel.tsx
+++ b/packages/devtools-ui/src/components/main-panel.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 type PanelProps = JSX.IntrinsicElements['div'] & {
@@ -14,7 +14,7 @@ export const MainPanel = ({
   class: classStyles,
   withPadding,
 }: PanelProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div
diff --git a/packages/devtools-ui/src/components/section.tsx b/packages/devtools-ui/src/components/section.tsx
index 38bc008f..335ee489 100644
--- a/packages/devtools-ui/src/components/section.tsx
+++ b/packages/devtools-ui/src/components/section.tsx
@@ -1,12 +1,12 @@
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 export const Section = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['section']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <section class={clsx(styles().section.main, rest.class)} {...rest}>
       {children}
@@ -18,7 +18,7 @@ export const SectionTitle = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['h3']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <h3 class={clsx(styles().section.title, rest.class)} {...rest}>
       {children}
@@ -30,7 +30,7 @@ export const SectionDescription = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['p']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <p class={clsx(styles().section.description, rest.class)} {...rest}>
       {children}
@@ -42,7 +42,7 @@ export const SectionIcon = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['span']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <span class={clsx(styles().section.icon, rest.class)} {...rest}>
       {children}
diff --git a/packages/devtools-ui/src/components/select.tsx b/packages/devtools-ui/src/components/select.tsx
index a5aec5f9..39da597b 100644
--- a/packages/devtools-ui/src/components/select.tsx
+++ b/packages/devtools-ui/src/components/select.tsx
@@ -1,5 +1,5 @@
 import { createSignal } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 interface SelectOption<T extends string | number> {
   value: T
@@ -15,7 +15,7 @@ interface SelectProps<T extends string | number> {
 }
 
 export function Select<T extends string | number>(props: SelectProps<T>) {
-  const styles = useStyles()
+  const styles = createStyles()
   const [selected, setSelected] = createSignal(
     props.value || props.options[0]?.value,
   )
diff --git a/packages/devtools-ui/src/components/tag.tsx b/packages/devtools-ui/src/components/tag.tsx
index 72b87de7..834f3e59 100644
--- a/packages/devtools-ui/src/components/tag.tsx
+++ b/packages/devtools-ui/src/components/tag.tsx
@@ -1,5 +1,5 @@
 import { Show } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { tokens } from '../styles/tokens'
 
 export const Tag = (props: {
@@ -8,7 +8,7 @@ export const Tag = (props: {
   count?: number
   disabled?: boolean
 }) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <button disabled={props.disabled} class={styles().tag.base}>
       <span class={styles().tag.dot(props.color)} />
diff --git a/packages/devtools-ui/src/components/theme.tsx b/packages/devtools-ui/src/components/theme.tsx
index 3ae8c428..bfd7a950 100644
--- a/packages/devtools-ui/src/components/theme.tsx
+++ b/packages/devtools-ui/src/components/theme.tsx
@@ -1,4 +1,9 @@
-import { createContext, createEffect, createSignal, useContext } from 'solid-js'
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  useContext as getContext,
+} from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
 export type TanStackDevtoolsTheme = 'light' | 'dark'
@@ -24,10 +29,10 @@ export const ThemeContextProvider = (props: {
   )
 }
 
-export function useTheme() {
-  const context = useContext(ThemeContext)
+export function createTheme() {
+  const context = getContext(ThemeContext)
   if (!context) {
-    throw new Error('useTheme must be used within a ThemeContextProvider')
+    throw new Error('createTheme must be used within a ThemeContextProvider')
   }
 
   return context
diff --git a/packages/devtools-ui/src/components/tree.tsx b/packages/devtools-ui/src/components/tree.tsx
index 225b34a8..dd1d4e9a 100644
--- a/packages/devtools-ui/src/components/tree.tsx
+++ b/packages/devtools-ui/src/components/tree.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import dayjs from 'dayjs'
 
 // css
-import { css, useStyles } from '../styles/use-styles'
+import { createStyles, css } from '../styles/use-styles'
 
 // icons
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
@@ -49,7 +49,7 @@ function JsonValue(props: {
 
   config?: { dateFormat?: string }
 }) {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <span class={styles().tree.valueContainer(props.isRoot ?? false)}>
@@ -152,7 +152,7 @@ const ArrayValue = (props: {
   path: string
   config?: { dateFormat?: string }
 }) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   const [expanded, setExpanded] = createSignal(
     props.depth <= props.defaultExpansionDepth &&
@@ -244,7 +244,7 @@ const ObjectValue = (props: {
   path: string
   config?: { dateFormat?: string }
 }) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   const [expanded, setExpanded] = createSignal(
     props.depth <= props.defaultExpansionDepth &&
@@ -354,7 +354,7 @@ const ObjectValue = (props: {
 type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
 
 const CopyButton = (props: { value: unknown }) => {
-  const styles = useStyles()
+  const styles = createStyles()
   const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
 
   return (
@@ -408,7 +408,7 @@ const CopyButton = (props: { value: unknown }) => {
 }
 
 const Expander = (props: { expanded: boolean; onClick: () => void }) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <span
       onClick={props.onClick}
diff --git a/packages/devtools-ui/src/index.ts b/packages/devtools-ui/src/index.ts
index 086a7235..c31c4e8c 100644
--- a/packages/devtools-ui/src/index.ts
+++ b/packages/devtools-ui/src/index.ts
@@ -13,7 +13,7 @@ export {
   SectionIcon,
 } from './components/section'
 export { Header, HeaderLogo } from './components/header'
-export { useTheme, ThemeContextProvider } from './components/theme'
+export { createTheme, ThemeContextProvider } from './components/theme'
 export type { TanStackDevtoolsTheme } from './components/theme'
 export {
   CheckCircleIcon,
diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts
index 6a0afdd2..be8f9135 100644
--- a/packages/devtools-ui/src/styles/use-styles.ts
+++ b/packages/devtools-ui/src/styles/use-styles.ts
@@ -1,6 +1,6 @@
 import * as goober from 'goober'
 import { createEffect, createSignal } from 'solid-js'
-import { useTheme } from '../components/theme'
+import { createTheme } from '../components/theme'
 import { tokens } from './tokens'
 
 import type { TanStackDevtoolsTheme } from '../components/theme'
@@ -686,8 +686,8 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
   }
 }
 
-export function useStyles() {
-  const { theme } = useTheme()
+export function createStyles() {
+  const { theme } = createTheme()
   const [styles, setStyles] = createSignal(stylesFactory(theme()))
   createEffect(() => {
     setStyles(stylesFactory(theme()))
diff --git a/packages/devtools/skills/devtools-plugin-panel/SKILL.md b/packages/devtools/skills/devtools-plugin-panel/SKILL.md
index 60dc63fd..a1a72fdd 100644
--- a/packages/devtools/skills/devtools-plugin-panel/SKILL.md
+++ b/packages/devtools/skills/devtools-plugin-panel/SKILL.md
@@ -92,12 +92,12 @@ import {
   JsonTree,
   Button,
   Tag,
-  useTheme,
+  createTheme,
 } from '@tanstack/devtools-ui'
 import { storeInspector } from './event-client'
 
 export default function StoreInspectorPanel() {
-  const { theme } = useTheme()
+  const { theme } = createTheme()
   const [state, setState] = createSignal<Record<string, unknown>>({})
   const [actions, setActions] = createSignal<
     Array<{ action: string; payload: unknown }>
@@ -382,7 +382,7 @@ function MyPanel({ theme }: { theme?: 'light' | 'dark' }) {
 }
 ```
 
-In Solid panels using devtools-ui, use `useTheme()` instead of prop drilling.
+In Solid panels using devtools-ui, use `createTheme()` instead of prop drilling.
 
 Source: docs/plugin-lifecycle.md
 
diff --git a/packages/devtools/skills/devtools-plugin-panel/references/panel-api.md b/packages/devtools/skills/devtools-plugin-panel/references/panel-api.md
index 25eeda23..c7d56d5a 100644
--- a/packages/devtools/skills/devtools-plugin-panel/references/panel-api.md
+++ b/packages/devtools/skills/devtools-plugin-panel/references/panel-api.md
@@ -70,7 +70,7 @@ All components are Solid.js. Use in Path 1 (Solid core) panels only.
 | `Checkbox`             | Checkbox input                                                                               |
 | `TanStackLogo`         | TanStack logo SVG                                                                            |
 | `ThemeContextProvider` | Wraps children with theme context                                                            |
-| `useTheme`             | Returns `{ theme: Accessor<Theme>, setTheme }` -- must be inside ThemeContextProvider        |
+| `createTheme`          | Returns `{ theme: Accessor<Theme>, setTheme }` -- must be inside ThemeContextProvider        |
 
 ### JsonTree Props
 
@@ -133,4 +133,4 @@ class EventClient<TEventMap extends Record<string, any>> {
 | `packages/event-bus-client/src/plugin.ts`                   | `EventClient` class                                      |
 | `packages/devtools-utils/src/solid/class.ts`                | `constructCoreClass`                                     |
 | `packages/devtools-ui/src/index.ts`                         | All UI component exports                                 |
-| `packages/devtools-ui/src/components/theme.tsx`             | `ThemeContextProvider`, `useTheme`                       |
+| `packages/devtools-ui/src/components/theme.tsx`             | `ThemeContextProvider`, `createTheme`                    |
diff --git a/packages/devtools/src/components/content-panel.tsx b/packages/devtools/src/components/content-panel.tsx
index 973ecfda..44aba909 100644
--- a/packages/devtools/src/components/content-panel.tsx
+++ b/packages/devtools/src/components/content-panel.tsx
@@ -1,5 +1,5 @@
-import { useDevtoolsSettings } from '../context/use-devtools-context'
-import { useStyles } from '../styles/use-styles'
+import { createDevtoolsSettings } from '../context/use-devtools-context'
+import { createStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 export const ContentPanel = (props: {
@@ -7,8 +7,8 @@ export const ContentPanel = (props: {
   children: JSX.Element
   handleDragStart?: (e: any) => void
 }) => {
-  const styles = useStyles()
-  const { settings } = useDevtoolsSettings()
+  const styles = createStyles()
+  const { settings } = createDevtoolsSettings()
   return (
     <div ref={props.ref} class={styles().devtoolsPanel}>
       {props.handleDragStart ? (
diff --git a/packages/devtools/src/components/main-panel.tsx b/packages/devtools/src/components/main-panel.tsx
index d238f48e..d2d8398d 100644
--- a/packages/devtools/src/components/main-panel.tsx
+++ b/packages/devtools/src/components/main-panel.tsx
@@ -1,9 +1,12 @@
 import clsx from 'clsx'
 import { DrawClientProvider } from '../context/draw-context'
-import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
-import { useStyles } from '../styles/use-styles'
+import {
+  createDevtoolsSettings,
+  createHeight,
+} from '../context/use-devtools-context'
+import { createStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
-import { usePiPWindow } from '../context/pip-context'
+import { createPiPWindow } from '../context/pip-context'
 
 import type { Accessor, JSX } from 'solid-js'
 
@@ -12,10 +15,10 @@ export const MainPanel = (props: {
   children: JSX.Element
   isResizing: Accessor<boolean>
 }) => {
-  const styles = useStyles()
-  const { height } = useHeight()
-  const { settings } = useDevtoolsSettings()
-  const pip = usePiPWindow()
+  const styles = createStyles()
+  const { height } = createHeight()
+  const { settings } = createDevtoolsSettings()
+  const pip = createPiPWindow()
   return (
     <div
       id={TANSTACK_DEVTOOLS}
diff --git a/packages/devtools/src/components/source-inspector.tsx b/packages/devtools/src/components/source-inspector.tsx
index 69fda17a..d0fcb285 100644
--- a/packages/devtools/src/components/source-inspector.tsx
+++ b/packages/devtools/src/components/source-inspector.tsx
@@ -1,14 +1,14 @@
 import { createEffect, createMemo, createSignal } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { createElementSize } from '@solid-primitives/resize-observer'
-import { useKeyDownList } from '@solid-primitives/keyboard'
+import { useKeyDownList as getKeyDownList } from '@solid-primitives/keyboard'
 import { createEventListener } from '@solid-primitives/event-listener'
 
-import { useDevtoolsSettings } from '../context/use-devtools-context'
+import { createDevtoolsSettings } from '../context/use-devtools-context'
 import { isHotkeyCombinationPressed } from '../utils/hotkey'
 
 export const SourceInspector = () => {
-  const { settings } = useDevtoolsSettings()
+  const { settings } = createDevtoolsSettings()
   const highlightStateInit = () => ({
     element: null as HTMLElement | null,
     bounding: { width: 0, height: 0, left: 0, top: 0 },
@@ -28,7 +28,7 @@ export const SourceInspector = () => {
     setMousePosition({ x: e.clientX, y: e.clientY })
   })
 
-  const downList = useKeyDownList()
+  const downList = getKeyDownList()
 
   const [disabledAfterClick, setDisabledAfterClick] = createSignal(false)
 
diff --git a/packages/devtools/src/components/tab-content.tsx b/packages/devtools/src/components/tab-content.tsx
index bbb64e56..0898ef5e 100644
--- a/packages/devtools/src/components/tab-content.tsx
+++ b/packages/devtools/src/components/tab-content.tsx
@@ -1,12 +1,12 @@
 import { createMemo } from 'solid-js'
-import { useDevtoolsState } from '../context/use-devtools-context'
+import { createDevtoolsState } from '../context/use-devtools-context'
 import { tabs } from '../tabs'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js'
 
 export const TabContent = (props: { isOpen: boolean }) => {
-  const { state } = useDevtoolsState()
-  const styles = useStyles()
+  const { state } = createDevtoolsState()
+  const styles = createStyles()
   const component = createMemo<
     ((props: { isOpen: boolean }) => JSX.Element) | null
   >(() => tabs.find((t) => t.id === state().activeTab)?.component || null)
diff --git a/packages/devtools/src/components/tabs.test.tsx b/packages/devtools/src/components/tabs.test.tsx
index 1fab9204..a9d1fc60 100644
--- a/packages/devtools/src/components/tabs.test.tsx
+++ b/packages/devtools/src/components/tabs.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@solidjs/testing-library'
 import { DevtoolsProvider } from '../context/devtools-context'
 import { DrawClientProvider } from '../context/draw-context'
 import { PiPProvider } from '../context/pip-context'
-import { useDevtoolsState } from '../context/use-devtools-context'
+import { createDevtoolsState } from '../context/use-devtools-context'
 import { Tabs } from './tabs'
 
 describe('Tabs', () => {
@@ -32,9 +32,9 @@ describe('Tabs', () => {
 
   it('marks the default active tab and moves the active class on store mutation', () => {
     // Capture the state setter from inside the provider tree.
-    let setState!: ReturnType<typeof useDevtoolsState>['setState']
+    let setState!: ReturnType<typeof createDevtoolsState>['setState']
     const StateProbe = () => {
-      setState = useDevtoolsState().setState
+      setState = createDevtoolsState().setState
       return null
     }
 
diff --git a/packages/devtools/src/components/tabs.tsx b/packages/devtools/src/components/tabs.tsx
index ab3b8fda..28dd7682 100644
--- a/packages/devtools/src/components/tabs.tsx
+++ b/packages/devtools/src/components/tabs.tsx
@@ -1,26 +1,26 @@
 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 { useDrawContext } from '../context/draw-context'
+import { createStyles } from '../styles/use-styles'
+import { createDevtoolsState } from '../context/use-devtools-context'
+import { createDrawContext } from '../context/draw-context'
 import { tabs } from '../tabs'
-import { usePiPWindow } from '../context/pip-context'
+import { createPiPWindow } from '../context/pip-context'
 
 interface TabsProps {
   toggleOpen: () => void
 }
 
 export const Tabs = (props: TabsProps) => {
-  const styles = useStyles()
-  const { state, setState } = useDevtoolsState()
-  const pipWindow = usePiPWindow()
+  const styles = createStyles()
+  const { state, setState } = createDevtoolsState()
+  const pipWindow = createPiPWindow()
   const handleDetachment = () => {
     pipWindow().requestPipWindow(
       `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
     )
   }
-  const { hoverUtils } = useDrawContext()
+  const { hoverUtils } = createDrawContext()
 
   return (
     <div class={styles().tabContainer}>
diff --git a/packages/devtools/src/components/trigger.tsx b/packages/devtools/src/components/trigger.tsx
index 07dc6eba..44870631 100644
--- a/packages/devtools/src/components/trigger.tsx
+++ b/packages/devtools/src/components/trigger.tsx
@@ -1,7 +1,7 @@
 import { Show, createEffect, createMemo, createSignal } from 'solid-js'
 import clsx from 'clsx'
-import { useDevtoolsSettings } from '../context/use-devtools-context'
-import { useStyles } from '../styles/use-styles'
+import { createDevtoolsSettings } from '../context/use-devtools-context'
+import { createStyles } from '../styles/use-styles'
 import TanStackLogo from './tanstack-logo.png'
 import type { Accessor } from 'solid-js'
 
@@ -9,9 +9,9 @@ export const Trigger = (props: {
   isOpen: Accessor<boolean>
   setIsOpen: (isOpen: boolean) => void
 }) => {
-  const { settings } = useDevtoolsSettings()
+  const { settings } = createDevtoolsSettings()
   const [containerRef, setContainerRef] = createSignal<HTMLElement>()
-  const styles = useStyles()
+  const styles = createStyles()
   const buttonStyle = createMemo(() => {
     return clsx(
       styles().mainCloseBtn,
diff --git a/packages/devtools/src/context/draw-context.tsx b/packages/devtools/src/context/draw-context.tsx
index 1af2eddf..e057aa7a 100644
--- a/packages/devtools/src/context/draw-context.tsx
+++ b/packages/devtools/src/context/draw-context.tsx
@@ -2,12 +2,12 @@ import {
   createContext,
   createMemo,
   createSignal,
+  useContext as getContext,
   onCleanup,
-  useContext,
 } from 'solid-js'
 import type { ParentComponent } from 'solid-js'
 
-const useDraw = (props: { animationMs: number }) => {
+const createDraw = (props: { animationMs: number }) => {
   const [activeHover, setActiveHover] = createSignal<boolean>(false)
   const [forceExpand, setForceExpand] = createSignal<boolean>(false)
 
@@ -42,25 +42,27 @@ const useDraw = (props: { animationMs: number }) => {
   }
 }
 
-type ContextType = ReturnType<typeof useDraw>
+type ContextType = ReturnType<typeof createDraw>
 
 const DrawContext = createContext<ContextType | undefined>(undefined)
 
 export const DrawClientProvider: ParentComponent<{
   animationMs: number
 }> = (props) => {
-  const value = useDraw({ animationMs: props.animationMs })
+  const value = createDraw({ animationMs: props.animationMs })
 
   return (
     <DrawContext.Provider value={value}>{props.children}</DrawContext.Provider>
   )
 }
 
-export function useDrawContext() {
-  const context = useContext(DrawContext)
+export function createDrawContext() {
+  const context = getContext(DrawContext)
 
   if (context === undefined) {
-    throw new Error(`useDrawContext must be used within a DrawClientProvider`)
+    throw new Error(
+      `createDrawContext must be used within a DrawClientProvider`,
+    )
   }
 
   return context
diff --git a/packages/devtools/src/context/pip-context.tsx b/packages/devtools/src/context/pip-context.tsx
index fc605808..4c552f8f 100644
--- a/packages/devtools/src/context/pip-context.tsx
+++ b/packages/devtools/src/context/pip-context.tsx
@@ -3,8 +3,8 @@ import {
   createEffect,
   createMemo,
   createSignal,
+  useContext as getContext,
   onCleanup,
-  useContext,
 } from 'solid-js'
 import { delegateEvents } from 'solid-js/web'
 import type { Accessor, JSX } from 'solid-js'
@@ -164,11 +164,11 @@ export const PiPProvider = (props: PiPProviderProps) => {
   )
 }
 
-export const usePiPWindow = () => {
+export const createPiPWindow = () => {
   const context = createMemo(() => {
-    const ctx = useContext(PiPContext)
+    const ctx = getContext(PiPContext)
     if (!ctx) {
-      throw new Error('usePiPWindow must be used within a PiPProvider')
+      throw new Error('createPiPWindow must be used within a PiPProvider')
     }
     return ctx()
   })
diff --git a/packages/devtools/src/context/use-devtools-context.ts b/packages/devtools/src/context/use-devtools-context.ts
index a8b94786..d6a3328f 100644
--- a/packages/devtools/src/context/use-devtools-context.ts
+++ b/packages/devtools/src/context/use-devtools-context.ts
@@ -1,7 +1,7 @@
-import { createEffect, createMemo, useContext } from 'solid-js'
+import { createEffect, createMemo, useContext as getContext } from 'solid-js'
 import { MAX_ACTIVE_PLUGINS } from '../utils/constants.js'
 import { DevtoolsContext } from './devtools-context.jsx'
-import { useDrawContext } from './draw-context.jsx'
+import { createDrawContext } from './draw-context.jsx'
 
 import type { DevtoolsStore } from './devtools-store.js'
 
@@ -9,18 +9,18 @@ import type { DevtoolsStore } from './devtools-store.js'
  * Returns an object containing the current state and setState function of the ShellContext.
  * Throws an error if used outside of a ShellContextProvider.
  */
-const useDevtoolsContext = () => {
-  const context = useContext(DevtoolsContext)
+const createDevtoolsContext = () => {
+  const context = getContext(DevtoolsContext)
   if (context === undefined) {
     throw new Error(
-      'useDevtoolsShellContext must be used within a ShellContextProvider',
+      'createDevtoolsContext must be used within a ShellContextProvider',
     )
   }
   return context
 }
 
-export function useTheme() {
-  const { settings, setSettings } = useDevtoolsSettings()
+export function createTheme() {
+  const { settings, setSettings } = createDevtoolsSettings()
   const theme = createMemo(() => settings().theme)
   return {
     theme,
@@ -29,9 +29,9 @@ export function useTheme() {
   }
 }
 
-export const usePlugins = () => {
-  const { store, setStore } = useDevtoolsContext()
-  const { setForceExpand } = useDrawContext()
+export const createPlugins = () => {
+  const { store, setStore } = createDevtoolsContext()
+  const { setForceExpand } = createDrawContext()
 
   const plugins = createMemo(() => store.plugins)
   const activePlugins = createMemo(() => store.state.activePlugins)
@@ -73,8 +73,8 @@ export const usePlugins = () => {
   return { plugins, toggleActivePlugins, activePlugins }
 }
 
-export const useDevtoolsState = () => {
-  const { store, setStore } = useDevtoolsContext()
+export const createDevtoolsState = () => {
+  const { store, setStore } = createDevtoolsContext()
   const state = createMemo(() => store.state)
   const setState = (newState: Partial<DevtoolsStore['state']>) => {
     setStore((prev) => ({
@@ -88,8 +88,8 @@ export const useDevtoolsState = () => {
   return { state, setState }
 }
 
-export const useDevtoolsSettings = () => {
-  const { store, setStore } = useDevtoolsContext()
+export const createDevtoolsSettings = () => {
+  const { store, setStore } = createDevtoolsContext()
 
   const settings = createMemo(() => store.settings)
 
@@ -106,8 +106,8 @@ export const useDevtoolsSettings = () => {
   return { setSettings, settings }
 }
 
-export const usePersistOpen = () => {
-  const { state, setState } = useDevtoolsState()
+export const createPersistOpen = () => {
+  const { state, setState } = createDevtoolsState()
 
   const persistOpen = createMemo(() => state().persistOpen)
 
@@ -118,8 +118,8 @@ export const usePersistOpen = () => {
   return { persistOpen, setPersistOpen }
 }
 
-export const useHeight = () => {
-  const { state, setState } = useDevtoolsState()
+export const createHeight = () => {
+  const { state, setState } = createDevtoolsState()
 
   const height = createMemo(() => state().height)
 
diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index df2aecae..d68ff07e 100644
--- a/packages/devtools/src/devtools.tsx
+++ b/packages/devtools/src/devtools.tsx
@@ -5,12 +5,12 @@ import { ThemeContextProvider } from '@tanstack/devtools-ui'
 import { devtoolsEventClient } from '@tanstack/devtools-client'
 
 import {
-  useDevtoolsSettings,
-  useHeight,
-  usePersistOpen,
-  useTheme,
+  createDevtoolsSettings,
+  createHeight,
+  createPersistOpen,
+  createTheme,
 } from './context/use-devtools-context'
-import { useDisableTabbing } from './hooks/use-disable-tabbing'
+import { createDisableTabbing } from './hooks/use-disable-tabbing'
 import { TANSTACK_DEVTOOLS } from './utils/storage'
 import { getHotkeyPermutations } from './utils/hotkey'
 import { Trigger } from './components/trigger'
@@ -18,18 +18,18 @@ import { MainPanel } from './components/main-panel'
 import { ContentPanel } from './components/content-panel'
 import { Tabs } from './components/tabs'
 import { TabContent } from './components/tab-content'
-import { usePiPWindow } from './context/pip-context'
+import { createPiPWindow } from './context/pip-context'
 import { SourceInspector } from './components/source-inspector'
 
 export default function DevTools() {
-  const { settings } = useDevtoolsSettings()
-  const { setHeight } = useHeight()
-  const { persistOpen, setPersistOpen } = usePersistOpen()
+  const { settings } = createDevtoolsSettings()
+  const { setHeight } = createHeight()
+  const { persistOpen, setPersistOpen } = createPersistOpen()
   const [rootEl, setRootEl] = createSignal<HTMLDivElement>()
   const [isOpen, setIsOpen] = createSignal(
     settings().defaultOpen || persistOpen(),
   )
-  const pip = usePiPWindow()
+  const pip = createPiPWindow()
   let panelRef: HTMLDivElement | undefined = undefined
   const [isResizing, setIsResizing] = createSignal(false)
 
@@ -156,7 +156,7 @@ export default function DevTools() {
       }
     })
   })
-  useDisableTabbing(isOpen)
+  createDisableTabbing(isOpen)
   createEffect(() => {
     if (rootEl()) {
       const el = rootEl()
@@ -189,7 +189,7 @@ export default function DevTools() {
     }
   })
 
-  const { theme } = useTheme()
+  const { theme } = createTheme()
 
   createEffect(() => {
     if (typeof document === 'undefined') {
diff --git a/packages/devtools/src/hooks/use-disable-tabbing.ts b/packages/devtools/src/hooks/use-disable-tabbing.ts
index 33fd75fc..51c5b4bd 100644
--- a/packages/devtools/src/hooks/use-disable-tabbing.ts
+++ b/packages/devtools/src/hooks/use-disable-tabbing.ts
@@ -19,7 +19,7 @@ const recursivelyChangeTabIndex = (
  * This is used to disable tabbing over the main devtools container while
  * the devtools are closed.
  */
-export const useDisableTabbing = (isOpen: () => boolean) => {
+export const createDisableTabbing = (isOpen: () => boolean) => {
   createEffect(() => {
     const el = document.getElementById(TANSTACK_DEVTOOLS)
     if (!el) return
diff --git a/packages/devtools/src/hooks/use-head-changes.ts b/packages/devtools/src/hooks/use-head-changes.ts
index 777460f5..00d3adb8 100644
--- a/packages/devtools/src/hooks/use-head-changes.ts
+++ b/packages/devtools/src/hooks/use-head-changes.ts
@@ -34,7 +34,7 @@ type UseHeadChangesOptions = {
   observeTitle?: boolean
 }
 
-export function useHeadChanges(
+export function createHeadChanges(
   onChange: (change: HeadChange, raw?: MutationRecord) => void,
   opts: UseHeadChangesOptions = {},
 ) {
diff --git a/packages/devtools/src/styles/use-styles.ts b/packages/devtools/src/styles/use-styles.ts
index 7261fb3e..cfab0fe0 100644
--- a/packages/devtools/src/styles/use-styles.ts
+++ b/packages/devtools/src/styles/use-styles.ts
@@ -1,6 +1,6 @@
 import * as goober from 'goober'
 import { createEffect, createSignal } from 'solid-js'
-import { useTheme } from '../context/use-devtools-context'
+import { createTheme } from '../context/use-devtools-context'
 import { tokens } from './tokens'
 import type { TanStackDevtoolsConfig } from '../context/devtools-context'
 import type { Accessor } from 'solid-js'
@@ -1542,8 +1542,8 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
   }
 }
 
-export function useStyles() {
-  const { theme } = useTheme()
+export function createStyles() {
+  const { theme } = createTheme()
   const [styles, setStyles] = createSignal(stylesFactory(theme()))
   createEffect(() => {
     setStyles(stylesFactory(theme()))
diff --git a/packages/devtools/src/tabs/hotkey-config.tsx b/packages/devtools/src/tabs/hotkey-config.tsx
index 461e30ed..6b10afae 100644
--- a/packages/devtools/src/tabs/hotkey-config.tsx
+++ b/packages/devtools/src/tabs/hotkey-config.tsx
@@ -2,7 +2,7 @@ import { Show } from 'solid-js'
 import { Button, Input } from '@tanstack/devtools-ui'
 
 import { uppercaseFirstLetter } from '../utils/sanitize'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { KeyboardKey } from '../context/devtools-store'
 
 interface HotkeyConfigProps {
@@ -22,7 +22,7 @@ const MODIFIER_DISPLAY_NAMES: Record<KeyboardKey, string> = {
 }
 
 export const HotkeyConfig = (props: HotkeyConfigProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   const toggleModifier = (modifier: KeyboardKey) => {
     if (props.hotkey.includes(modifier)) {
diff --git a/packages/devtools/src/tabs/marketplace/marketplace-header.tsx b/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
index 1ee14efe..1dd1b6fc 100644
--- a/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
+++ b/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
@@ -1,5 +1,5 @@
 import { SearchIcon, SettingsIcon } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
+import { createStyles } from '../../styles/use-styles'
 import { TagFilters } from './tag-filters'
 import type { Accessor } from 'solid-js'
 
@@ -13,7 +13,7 @@ interface MarketplaceHeaderProps {
 }
 
 export const MarketplaceHeader = (props: MarketplaceHeaderProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div class={styles().pluginMarketplaceHeader}>
diff --git a/packages/devtools/src/tabs/marketplace/plugin-card.tsx b/packages/devtools/src/tabs/marketplace/plugin-card.tsx
index 3000974d..38a02230 100644
--- a/packages/devtools/src/tabs/marketplace/plugin-card.tsx
+++ b/packages/devtools/src/tabs/marketplace/plugin-card.tsx
@@ -6,7 +6,7 @@ import {
   PackageIcon,
   XCircleIcon,
 } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
+import { createStyles } from '../../styles/use-styles'
 import {
   getBadgeClass,
   getBadgeText,
@@ -21,7 +21,7 @@ interface PluginCardComponentProps {
 }
 
 export const PluginCardComponent = (props: PluginCardComponentProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
   const { card } = props
 
   return (
diff --git a/packages/devtools/src/tabs/marketplace/plugin-section.tsx b/packages/devtools/src/tabs/marketplace/plugin-section.tsx
index 053915dd..fd0b0ed2 100644
--- a/packages/devtools/src/tabs/marketplace/plugin-section.tsx
+++ b/packages/devtools/src/tabs/marketplace/plugin-section.tsx
@@ -1,6 +1,6 @@
 import { For, Show } from 'solid-js'
 import { ChevronDownIcon } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
+import { createStyles } from '../../styles/use-styles'
 import { PluginCardComponent } from './plugin-card'
 import type { Accessor } from 'solid-js'
 import type { PluginCard, PluginSection } from './types'
@@ -38,7 +38,7 @@ const MailIcon = () => (
 )
 
 export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div class={styles().pluginMarketplaceSection}>
diff --git a/packages/devtools/src/tabs/marketplace/settings-panel.tsx b/packages/devtools/src/tabs/marketplace/settings-panel.tsx
index d0dbc5f9..9f507f0f 100644
--- a/packages/devtools/src/tabs/marketplace/settings-panel.tsx
+++ b/packages/devtools/src/tabs/marketplace/settings-panel.tsx
@@ -1,6 +1,6 @@
 import { Show } from 'solid-js'
 import { Checkbox, CloseIcon } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
+import { createStyles } from '../../styles/use-styles'
 import type { Accessor, Setter } from 'solid-js'
 
 interface SettingsPanelProps {
@@ -11,7 +11,7 @@ interface SettingsPanelProps {
 }
 
 export const SettingsPanel = (props: SettingsPanelProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <Show when={props.isOpen()}>
diff --git a/packages/devtools/src/tabs/marketplace/tag-filters.tsx b/packages/devtools/src/tabs/marketplace/tag-filters.tsx
index 729de08c..a33de679 100644
--- a/packages/devtools/src/tabs/marketplace/tag-filters.tsx
+++ b/packages/devtools/src/tabs/marketplace/tag-filters.tsx
@@ -1,5 +1,5 @@
 import { For, Show } from 'solid-js'
-import { useStyles } from '../../styles/use-styles'
+import { createStyles } from '../../styles/use-styles'
 import type { Accessor } from 'solid-js'
 
 interface TagFiltersProps {
@@ -9,7 +9,7 @@ interface TagFiltersProps {
 }
 
 export const TagFilters = (props: TagFiltersProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <Show when={props.tags().length > 0}>
diff --git a/packages/devtools/src/tabs/plugin-marketplace.tsx b/packages/devtools/src/tabs/plugin-marketplace.tsx
index dd90e1af..cbadc1dc 100644
--- a/packages/devtools/src/tabs/plugin-marketplace.tsx
+++ b/packages/devtools/src/tabs/plugin-marketplace.tsx
@@ -1,7 +1,7 @@
 import { For, Show, createSignal, onCleanup, onMount } from 'solid-js'
 import { devtoolsEventClient } from '@tanstack/devtools-client'
-import { usePlugins } from '../context/use-devtools-context'
-import { useStyles } from '../styles/use-styles'
+import { createPlugins } from '../context/use-devtools-context'
+import { createStyles } from '../styles/use-styles'
 import { PluginSectionComponent } from './marketplace/plugin-section'
 import { SettingsPanel } from './marketplace/settings-panel'
 import { MarketplaceHeader } from './marketplace/marketplace-header'
@@ -15,8 +15,8 @@ import type { PackageJson } from '@tanstack/devtools-client'
 import type { PluginCard, PluginSection } from './marketplace/types'
 
 export const PluginMarketplace = () => {
-  const styles = useStyles()
-  const { plugins } = usePlugins()
+  const styles = createStyles()
+  const { plugins } = createPlugins()
   const [pluginSections, setPluginSections] = createSignal<
     Array<PluginSection>
   >([])
diff --git a/packages/devtools/src/tabs/plugins-tab.tsx b/packages/devtools/src/tabs/plugins-tab.tsx
index c9616777..bfc4c870 100644
--- a/packages/devtools/src/tabs/plugins-tab.tsx
+++ b/packages/devtools/src/tabs/plugins-tab.tsx
@@ -1,22 +1,23 @@
 import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
 import clsx from 'clsx'
-import { useDrawContext } from '../context/draw-context'
-import { usePlugins, useTheme } from '../context/use-devtools-context'
-import { useStyles } from '../styles/use-styles'
+import { createDrawContext } from '../context/draw-context'
+import { createPlugins, createTheme } from '../context/use-devtools-context'
+import { createStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 import { PluginMarketplace } from './plugin-marketplace'
 
 export const PluginsTab = (props: { isOpen: boolean }) => {
-  const { plugins, activePlugins, toggleActivePlugins } = usePlugins()
-  const { expanded, hoverUtils, animationMs, setForceExpand } = useDrawContext()
+  const { plugins, activePlugins, toggleActivePlugins } = createPlugins()
+  const { expanded, hoverUtils, animationMs, setForceExpand } =
+    createDrawContext()
   const [pluginRefs, setPluginRefs] = createSignal(
     new Map<string, HTMLDivElement>(),
   )
   const [showMarketplace, setShowMarketplace] = createSignal(false)
 
-  const styles = useStyles()
+  const styles = createStyles()
 
-  const { theme } = useTheme()
+  const { theme } = createTheme()
 
   const hasPlugins = createMemo(
     () => plugins()?.length && plugins()!.length > 0,
diff --git a/packages/devtools/src/tabs/seo-tab/index.tsx b/packages/devtools/src/tabs/seo-tab/index.tsx
index c00a97e9..f89646ff 100644
--- a/packages/devtools/src/tabs/seo-tab/index.tsx
+++ b/packages/devtools/src/tabs/seo-tab/index.tsx
@@ -1,6 +1,6 @@
 import { Show, createSignal } from 'solid-js'
 import { MainPanel } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
+import { createStyles } from '../../styles/use-styles'
 import { SocialPreviewsSection } from './social-previews'
 import { SerpPreviewSection } from './serp-preview'
 
@@ -9,7 +9,7 @@ type SeoSubView = 'social-previews' | 'serp-preview'
 export const SeoTab = () => {
   const [activeView, setActiveView] =
     createSignal<SeoSubView>('social-previews')
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <MainPanel withPadding>
diff --git a/packages/devtools/src/tabs/seo-tab/serp-preview.tsx b/packages/devtools/src/tabs/seo-tab/serp-preview.tsx
index e787d6a9..55a9cb2c 100644
--- a/packages/devtools/src/tabs/seo-tab/serp-preview.tsx
+++ b/packages/devtools/src/tabs/seo-tab/serp-preview.tsx
@@ -1,7 +1,7 @@
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { For, createMemo, createSignal } from 'solid-js'
-import { useHeadChanges } from '../../hooks/use-head-changes'
-import { useStyles } from '../../styles/use-styles'
+import { createHeadChanges } from '../../hooks/use-head-changes'
+import { createStyles } from '../../styles/use-styles'
 
 /** Google typically truncates titles at ~60 characters. */
 const TITLE_MAX_CHARS = 60
@@ -138,7 +138,7 @@ function SerpSnippetPreview(props: {
   label: string
   issues: Array<string>
 }) {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div class={styles().serpPreviewBlock}>
@@ -200,7 +200,7 @@ function SerpSnippetPreview(props: {
 export function SerpPreviewSection() {
   const [serp, setSerp] = createSignal<SerpData>(getSerpFromHead())
 
-  useHeadChanges(() => {
+  createHeadChanges(() => {
     setSerp(getSerpFromHead())
   })
 
diff --git a/packages/devtools/src/tabs/seo-tab/social-previews.tsx b/packages/devtools/src/tabs/seo-tab/social-previews.tsx
index eca36b0c..b471c782 100644
--- a/packages/devtools/src/tabs/seo-tab/social-previews.tsx
+++ b/packages/devtools/src/tabs/seo-tab/social-previews.tsx
@@ -1,7 +1,7 @@
 import { For, createSignal } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
-import { useHeadChanges } from '../../hooks/use-head-changes'
+import { createStyles } from '../../styles/use-styles'
+import { createHeadChanges } from '../../hooks/use-head-changes'
 
 const SOCIALS = [
   {
@@ -95,7 +95,7 @@ function SocialPreview(props: {
   color: string
   network: string
 }) {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div
@@ -142,7 +142,7 @@ function SocialPreview(props: {
 
 export function SocialPreviewsSection() {
   const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())
-  const styles = useStyles()
+  const styles = createStyles()
 
   function analyzeHead(): Array<SocialReport> {
     const metaTags = Array.from(document.head.querySelectorAll('meta'))
@@ -172,7 +172,7 @@ export function SocialPreviewsSection() {
     return reports
   }
 
-  useHeadChanges(() => {
+  createHeadChanges(() => {
     setReports(analyzeHead())
   })
 
diff --git a/packages/devtools/src/tabs/settings-tab.test.tsx b/packages/devtools/src/tabs/settings-tab.test.tsx
index 14046e9d..fe21e150 100644
--- a/packages/devtools/src/tabs/settings-tab.test.tsx
+++ b/packages/devtools/src/tabs/settings-tab.test.tsx
@@ -2,7 +2,7 @@ import { render } from '@solidjs/testing-library'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { ThemeContextProvider } from '@tanstack/devtools-ui'
 import { DevtoolsProvider } from '../context/devtools-context'
-import { useDevtoolsSettings } from '../context/use-devtools-context'
+import { createDevtoolsSettings } from '../context/use-devtools-context'
 import { SettingsTab } from './settings-tab'
 import type { DevtoolsStore } from '../context/devtools-store'
 import type { TanStackDevtoolsConfig } from '../context/devtools-context'
@@ -16,7 +16,7 @@ const renderSettingsTab = (config?: Partial<TanStackDevtoolsConfig>) => {
   let setSettings!: (s: Partial<DevtoolsStore['settings']>) => void
 
   const Capture = () => {
-    setSettings = useDevtoolsSettings().setSettings
+    setSettings = createDevtoolsSettings().setSettings
     return <SettingsTab />
   }
 
diff --git a/packages/devtools/src/tabs/settings-tab.tsx b/packages/devtools/src/tabs/settings-tab.tsx
index 60a42eea..26a0ea97 100644
--- a/packages/devtools/src/tabs/settings-tab.tsx
+++ b/packages/devtools/src/tabs/settings-tab.tsx
@@ -16,14 +16,14 @@ import {
   SettingsCog,
 } from '@tanstack/devtools-ui/icons'
 
-import { useDevtoolsSettings } from '../context/use-devtools-context'
-import { useStyles } from '../styles/use-styles'
+import { createDevtoolsSettings } from '../context/use-devtools-context'
+import { createStyles } from '../styles/use-styles'
 import { HotkeyConfig } from './hotkey-config'
 import type { KeyboardKey } from '../context/devtools-store'
 
 export const SettingsTab = () => {
-  const { setSettings, settings } = useDevtoolsSettings()
-  const styles = useStyles()
+  const { setSettings, settings } = createDevtoolsSettings()
+  const styles = createStyles()
 
   const modifiers: Array<KeyboardKey> = ['CtrlOrMeta', 'Alt', 'Shift']