Skip to content
Theme UI


Theme UI is designed to work seamlessly with MDX, a format allowing you to write JSX in your Markdown files & use Markdown files as React components. This makes it easy to style text content with Theme UI and add themed, interactive components like charts or sliders to content without writing prose in JSX.

While many Theme UI projects use MDX, as of v0.15 it’s not included in the default theme-ui package to reduce bundle size. Install the @theme-ui/mdx package alongside theme-ui to use MDX with Theme UI.

npm i @theme-ui/mdx @mdx-js/react

For the full API reference, visit the @theme-ui/mdx package docs.

Edit the page on GitHub
Styling MDX