Skip to content
Theme UI


  • How it Works Implementation details for the core library
  • JSX Pragma Using JSX pragma to enable the sx prop
  • Motivation Project background and prior art
  • Object Styles Authoring styles with object literal syntax
  • Variants Create stylistic theme-based variations
  • Layouts Creating themeable page layouts
  • Styled Components Create reusable styled components
  • Responsive Typography Style content responsively
  • Nested ThemeUIProviders Add contextual theme and stylistic changes
  • Merging Themes Merging theme objects together with JavaScript
  • Custom CacheProvider Customise the styles generated and where they are injected
  • Theme Color Meta Tag Use theme colors for the theme color meta tag
  • Color Mode Toggles Create buttons to switch color modes
  • Global Styles Add global styles with Emotion
  • TypeScript Using Theme UI with TypeScript
Edit the page on GitHub
How it Works