with theme.styles.h2 Themed.h3 //
with theme.styles.h3 Themed.h4 //
with theme.styles.h4 Themed.h5 //
with theme.styles.h5 Themed.h6 //
with theme.styles.h6 Themed.img // with theme.styles.img Themed.pre //
 with theme.styles.pre
Themed.code       //  with theme.styles.code
Themed.ol         //  with theme.styles.ol
Themed.ul         //  with theme.styles.ul
Themed.li         //  with theme.styles.li
Themed.blockquote //  with theme.styles.blockquote
Themed.hr         //  with theme.styles.hr
Themed.em         //  with theme.styles.em
Themed.table      //  with theme.styles.table
Themed.tr         //  with theme.styles.tr
Themed.th         //  with theme.styles.th
Themed.td         //  with theme.styles.td
Themed.strong     //  with theme.styles.strong
Themed.del        //  with theme.styles.del
Themed.inlineCode //  with theme.styles.inlineCode
Themed.thematicBreak //  with theme.styles.hr
Themed.div        //  with base styling
Themed.root       //  with theme.styles.root
```

**With Custom Props:**

```jsx theme={null}

  Heading with additional styles

```

### Hooks

#### `useThemedStylesWithMdx`

A hook that wraps MDX components with styles from `theme.styles`.

```jsx theme={null}
import { MDXProvider, useMDXComponents } from '@mdx-js/react'
import { useThemedStylesWithMdx } from '@theme-ui/mdx'
import { ThemeUIProvider } from 'theme-ui'

function MyProvider({ theme, components, children }) {
  const componentsWithStyles = useThemedStylesWithMdx(
    useMDXComponents(components)
  )
  
  return (
    
      
        {children}
      
    
  )
}
```

**Signature:**

```typescript theme={null}
useThemedStylesWithMdx(
  components: MDXProviderComponents
): MDXProviderComponents
```

**Features:**

* Applies styles from `theme.styles` to MDX components
* Merges with custom components you provide
* Preserves component functionality
* Works with `@mdx-js/react` v2+

### Utilities

#### `themed`

A utility function to create themed components.

```jsx theme={null}
import { themed } from '@theme-ui/mdx'

const ThemedDiv = themed('div')

function MyComponent() {
  return Styled content
}
```

#### `defaultMdxComponents`

The default set of MDX components used by Theme UI.

```javascript theme={null}
import { defaultMdxComponents } from '@theme-ui/mdx'

console.log(defaultMdxComponents)
// {
//   p: Themed.p,
//   a: Themed.a,
//   h1: Themed.h1,
//   ...
// }
```

## Usage with MDX

### Basic Setup

```jsx theme={null}
import { MDXProvider } from '@mdx-js/react'
import { Themed } from '@theme-ui/mdx'
import { ThemeUIProvider } from 'theme-ui'
import theme from './theme'

const components = {
  h1: Themed.h1,
  h2: Themed.h2,
  p: Themed.p,
  a: Themed.a,
  // ... other components
}

function App({ children }) {
  return (
    
      
        {children}
      
    
  )
}
```

### With Custom Components

```jsx theme={null}
import { useThemedStylesWithMdx } from '@theme-ui/mdx'
import { useMDXComponents } from '@mdx-js/react'
import CustomHeading from './CustomHeading'

function MyMDXProvider({ children }) {
  const components = useThemedStylesWithMdx(
    useMDXComponents({
      // Custom components merged with themed styles
      h1: CustomHeading,
      wrapper: ({ children }) => {children},
    })
  )
  
  return (
    
      {children}
    
  )
}
```

### Styling MDX Content

Define styles in your theme:

```javascript theme={null}
const theme = {
  styles: {
    // Base styles
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
    },
    
    // MDX component styles
    h1: {
      fontSize: 5,
      fontWeight: 'bold',
      lineHeight: 'heading',
      mt: 4,
      mb: 3,
    },
    h2: {
      fontSize: 4,
      fontWeight: 'bold',
      lineHeight: 'heading',
      mt: 4,
      mb: 3,
    },
    p: {
      fontSize: 2,
      lineHeight: 'body',
      mb: 3,
    },
    a: {
      color: 'primary',
      textDecoration: 'none',
      '&:hover': {
        textDecoration: 'underline',
      },
    },
    pre: {
      fontFamily: 'monospace',
      fontSize: 1,
      p: 3,
      bg: 'muted',
      overflow: 'auto',
      borderRadius: 4,
    },
    code: {
      fontFamily: 'monospace',
      fontSize: 1,
    },
    inlineCode: {
      fontFamily: 'monospace',
      color: 'secondary',
      bg: 'muted',
      px: 1,
      borderRadius: 2,
    },
    // ... more styles
  },
}
```

## Use Cases

### Outside MDX

Use `Themed` components anywhere, not just in MDX:

```jsx theme={null}
import { Themed } from '@theme-ui/mdx'

function BlogPost({ title, content }) {
  return (
    
      {title}
      {content}
    
  )
}
```

### Consistent Typography

Ensure consistent typography across MDX and regular JSX:

```jsx theme={null}
// In MDX files, these are styled automatically
# Heading
Paragraph text

// In JSX, use Themed components
Heading
Paragraph text
```

### Custom Wrapper

```jsx theme={null}
import { Themed } from '@theme-ui/mdx'

function MDXLayout({ children }) {
  return (
    
      {children}
    
  )
}
```

## TypeScript Types

```typescript theme={null}
import type {
  MDXProviderComponents,
  MdxAliases,
  MdxProviderProps,
  ThemedComponent,
  MdxAliasesKeys,
  ThemeUIMdxIntrinsics,
  ThemedComponentsDict,
  ThemedProps,
} from '@theme-ui/mdx'
```

### Type Usage

```typescript theme={null}
import type { ThemedComponent } from '@theme-ui/mdx'

const CustomHeading: ThemedComponent<'h1'> = (props) => {
  return 
}
```

## Notes

* Works with MDX v2 and later
* Requires `@emotion/react` as a peer dependency
* Requires `@types/mdx` for TypeScript support
* The `Themed` components support the `sx` prop
* All components forward refs properly
* No side effects - safe for tree-shaking

## Examples

### Blog Post

```jsx theme={null}
import { Themed } from '@theme-ui/mdx'

function BlogPost({ post }) {
  return (
    
      {post.title}
      
        {post.date}
      
      {post.content}
    
  )
}
```

### Documentation Page

```jsx theme={null}
import { Themed } from '@theme-ui/mdx'

function DocPage({ frontmatter, children }) {
  return (
    
      {frontmatter.title}
      {frontmatter.description}
      
      {children}
    
  )
}
```

## Related

* [MDX Documentation](https://mdxjs.com)
* [@theme-ui/core](/api/packages/core) - Core Theme UI functionality
* [Theme Specification](/theme-spec) - Defining theme.styles
* [MDX Guide](/guides/mdx) - Full MDX integration guide