Skip to content
Theme UI

Migration Guides


JSX Pragma

If you were using the Theme UI custom JSX pragma, rename the css prop to sx. This does not apply if you were importing and using the css utility function manually.


If you were using the theme-ui-typography package, install the new package named @theme-ui/typography instead. The toStyle API is no longer included. Use the toTheme API instead, see the Typography.js docs for how to use this utility.

Box and layout component

If you were using Styled System style props on the Box component or any other layout component, replace these props with either the sx prop or by using the css utility.


  • Replace ColorModeProvider and ComponentProvider with the ThemeProvider component.
  • The @emotion/styled package is no longer required for Theme UI. If you are not using it directly in your application, you can remove it from your dependencies.
Edit the page on GitHub
PostList A2