diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index c881cede0..34f73e458 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -48,7 +48,7 @@ export interface IntrinsicSxElements {
   em: JSX.IntrinsicElements['em'] & SxProps
   strong: JSX.IntrinsicElements['strong'] & SxProps
   div: JSX.IntrinsicElements['div'] & SxProps
-  delete: JSX.IntrinsicElements['div'] & SxProps
+  del: JSX.IntrinsicElements['div'] & SxProps
   inlineCode: JSX.IntrinsicElements['div'] & SxProps
   thematicBreak: JSX.IntrinsicElements['div'] & SxProps
   root: JSX.IntrinsicElements['div'] & SxProps
diff --git a/packages/mdx/package.json b/packages/mdx/package.json
index d0cc6d56a..562576d8a 100644
--- a/packages/mdx/package.json
+++ b/packages/mdx/package.json
@@ -1,21 +1,25 @@
 {
   "name": "@theme-ui/mdx",
   "version": "0.3.0",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
   "dependencies": {
     "@emotion/core": "^10.0.0",
     "@emotion/styled": "^10.0.0",
     "@mdx-js/react": "^1.0.0"
   },
+  "devDependencies": {
+    "@theme-ui/core": "^0.3.1",
+    "@theme-ui/css": "^0.3.1"
+  },
   "peerDependencies": {
-    "@theme-ui/core": "*",
-    "@theme-ui/css": "*",
     "react": "^16.11.0"
   },
   "author": "Brent Jackson",
diff --git a/packages/mdx/src/index.js b/packages/mdx/src/index.js
deleted file mode 100644
index 77e0a9620..000000000
--- a/packages/mdx/src/index.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { jsx } from '@theme-ui/core'
-import { css, get } from '@theme-ui/css'
-import React from 'react'
-import { ThemeContext } from '@emotion/core'
-import styled from '@emotion/styled'
-import {
-  MDXProvider as _MDXProvider,
-  useMDXComponents
-} from '@mdx-js/react'
-
-// mdx components
-const tags = [
-  'p',
-  'b',
-  'i',
-  'a',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'img',
-  'pre',
-  'code',
-  'ol',
-  'ul',
-  'li',
-  'blockquote',
-  'hr',
-  'em',
-  'table',
-  'tr',
-  'th',
-  'td',
-  'em',
-  'strong',
-  'del',
-  // mdx
-  'inlineCode',
-  'thematicBreak',
-  // other
-  'div',
-  // theme-ui
-  'root',
-]
-
-const aliases = {
-  inlineCode: 'code',
-  thematicBreak: 'hr',
-  root: 'div',
-}
-
-const alias = n => aliases[n] || n
-
-export const themed = key => props =>
-  css(get(props.theme, `styles.${key}`))(props.theme)
-
-export const Styled = styled('div')(themed('div'))
-
-export const components = {}
-
-tags.forEach(tag => {
-  components[tag] = styled(alias(tag))(themed(tag))
-  Styled[tag] = components[tag]
-})
-
-const createComponents = comps => {
-  const next = { ...components }
-  Object.keys(comps).forEach(key => {
-    next[key] = styled(comps[key])(themed(key))
-  })
-  return next
-}
-
-export const MDXProvider = ({
-  components,
-  children,
-}) => {
-  const outer = useMDXComponents()
-
-  return jsx(_MDXProvider, {
-    components: createComponents({ ...outer, ...components }),
-    children,
-  })
-}
diff --git a/packages/mdx/src/index.ts b/packages/mdx/src/index.ts
new file mode 100644
index 000000000..fe6a46306
--- /dev/null
+++ b/packages/mdx/src/index.ts
@@ -0,0 +1,108 @@
+import { jsx, IntrinsicSxElements } from '@theme-ui/core'
+import { css, get, Theme } from '@theme-ui/css'
+import { ComponentType, FC, ReactNode } from 'react'
+import styled, { Interpolation } from '@emotion/styled'
+import {
+  MDXProvider as _MDXProvider,
+  useMDXComponents
+} from '@mdx-js/react'
+
+
+export type MdxAliases = {
+  [key in keyof IntrinsicSxElements]: keyof JSX.IntrinsicElements
+}
+
+export type MdxAliasesKeys = 'inlineCode' | 'thematicBreak' | 'root'
+
+export type MdxProviderComponents = {
+  [key in keyof IntrinsicSxElements]: ComponentType
+}
+
+export type ThemedProps = {
+  theme: Theme
+}
+
+export interface MdxProviderProps {
+  components?: MdxProviderComponents
+  children: ReactNode
+}
+
+// mdx components
+const tags: Array<keyof IntrinsicSxElements> = [
+  'p',
+  'b',
+  'i',
+  'a',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'img',
+  'pre',
+  'code',
+  'ol',
+  'ul',
+  'li',
+  'blockquote',
+  'hr',
+  'em',
+  'table',
+  'tr',
+  'th',
+  'td',
+  'em',
+  'strong',
+  'del',
+  // mdx
+  'inlineCode',
+  'thematicBreak',
+  // other
+  'div',
+  // theme-ui
+  'root',
+]
+
+const aliases: Pick<MdxAliases, MdxAliasesKeys> = {
+  inlineCode: 'code',
+  thematicBreak: 'hr',
+  root: 'div',
+}
+
+const alias = (n: keyof IntrinsicSxElements): keyof JSX.IntrinsicElements => aliases[n] || n
+
+export const themed = (key: keyof IntrinsicSxElements) => (props: ThemedProps) =>
+  css(get(props.theme, `styles.${key}`))(props.theme) as Interpolation<ThemedProps>
+
+export const Styled = styled('div')(themed('div'))
+
+export const components = {}
+
+tags.forEach(tag => {
+  components[tag] = styled(alias(tag))(themed(tag))
+  Styled[tag] = components[tag]
+})
+
+const createComponents = (comps: MdxProviderComponents) => {
+  const next = { ...components }
+
+  const componentKeys = Object.keys(comps) as Array<keyof IntrinsicSxElements>
+
+  componentKeys.forEach(key => {
+    next[key] = styled(comps[key])(themed(key))
+  })
+  return next
+}
+
+export const MDXProvider: FC<MdxProviderProps> = ({
+  components,
+  children,
+}) => {
+  const outer = useMDXComponents()
+
+  return jsx(_MDXProvider, {
+    components: createComponents({ ...outer, ...components }),
+    children,
+  })
+}
diff --git a/packages/mdx/tsconfig.json b/packages/mdx/tsconfig.json
new file mode 100644
index 000000000..747173cf6
--- /dev/null
+++ b/packages/mdx/tsconfig.json
@@ -0,0 +1,4 @@
+{
+    "extends": "../core/tsconfig.json",
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
+}