Skip to main content
This guide covers breaking changes and new features when upgrading from Theme UI v0.15 to v0.16.

​
Breaking Changes

​
TypeScript 5.1+ Required

Theme UI v0.16 now requires TypeScript 5.1.2 or newer due to breaking changes in JSX types.
This change is necessary because of breaking changes to JSX types in TypeScript. See the related GitHub issue for more details. Migration steps:
  1. Update @types/react to a version published after June 1, 2023
  2. Enable JSX Automatic Runtime (highly encouraged to minimize friction and avoid type errors)
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

​
@theme-ui/sidenav Package Removed

The @theme-ui/sidenav package has been removed due to low usage and breaking changes in @types/react.
If you were using this package, you’ll need to implement your own sidenav component or find an alternative solution.

​
ThemeProvider Renamed to ThemeUIProvider

The ThemeProvider component has been renamed to ThemeUIProvider to avoid naming conflicts.
Update all imports and usage of ThemeProvider: Before: 
import { ThemeProvider } from 'theme-ui'

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app */}
    </ThemeProvider>
  )
}
After: 
import { ThemeUIProvider } from 'theme-ui'

function App() {
  return (
    <ThemeUIProvider theme={theme}>
      {/* Your app */}
    </ThemeUIProvider>
  )
}
The old ThemeProvider export is still available but deprecated. It will be removed in a future version.

​
Related Changes

  • PR #2432 - Dependency bumps for 0.16.0, support only new React and TypeScript versions
  • PR #2360 - Deprecate/rename ThemeProvider to ThemeUIProvider

Build docs developers (and LLMs) love

Get started for freeTalk to us