Guides

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
MDX Layout Components Use Theme UI to create MDX layouts
Responsive Typography Style content responsively
Nested ThemeProviders Add contextual theme and stylistic changes
Custom CacheProvider Customise the styles generated and where they are injected
Syntax Highlighting Add syntax highlighting to MDX code blocks
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
Linked Headings Add linked headings in MDX
Using Theme UI without MDX Use the core package to avoid unnecessary bloat
Merging Themes Merging theme objects together with JavaScript
TypeScript Using Theme UI with TypeScript