diff --git a/src/entry.js b/src/entry.js
index 154c8d8..15a9946 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -6,18 +6,15 @@ const mod = require(DOC_FILENAME)
 const slides = mod.default
 const { theme, components, Provider } = mod
 
-const Root = Provider || React.Fragment
-
 export default class App extends React.Component {
   render () {
     return (
-      <Root>
-        <SlideDeck
-          slides={slides}
-          theme={theme}
-          components={components}
-        />
-      </Root>
+      <SlideDeck
+        slides={slides}
+        theme={theme}
+        components={components}
+        Provider={Provider}
+      />
     )
   }
 }
diff --git a/src/index.js b/src/index.js
index a9d9e4c..39192da 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import { MDXProvider } from '@mdx-js/tag'
 import { ThemeProvider } from 'styled-components'
 import debounce from 'lodash.debounce'
 
-import { Provider } from './context'
+import { Provider as ContextProvider } from './context'
 import Carousel from './Carousel'
 import Slide from './Slide'
 import Dots from './Dots'
@@ -43,6 +43,7 @@ export class SlideDeck extends React.Component {
     slides: [],
     theme: defaultTheme,
     components: {} ,
+    Provider: props => <React.Fragment children={props.children} />,
     width: '100vw',
     height: '100vh',
     ignoreKeyEvents: false
@@ -147,6 +148,7 @@ export class SlideDeck extends React.Component {
       slides,
       theme,
       components,
+      Provider,
       width,
       height
     } = this.props
@@ -163,42 +165,44 @@ export class SlideDeck extends React.Component {
     }
 
     return (
-      <Provider value={context}>
+      <ContextProvider value={context}>
         <ThemeProvider theme={theme}>
           <MDXProvider
             components={{
               ...defaultComponents,
               ...components
             }}>
-            <Wrapper
-              {...this.state}
-              slides={slides}
-              width={width}
-              height={height}>
-              <GoogleFonts />
-              <Carousel index={index}>
-                {slides.map((Component, i) => (
-                  <Slide
-                    key={i}
-                    id={'slide-' + i}
-                    index={i}>
-                    <Component />
-                  </Slide>
-                ))}
-              </Carousel>
-              <Dots
-                mt={-32}
-                mx='auto'
-                index={index}
-                length={length}
-                onClick={index => {
-                  this.setState({ index })
-                }}
-              />
-            </Wrapper>
+            <Provider {...this.state}>
+              <Wrapper
+                {...this.state}
+                slides={slides}
+                width={width}
+                height={height}>
+                <GoogleFonts />
+                <Carousel index={index}>
+                  {slides.map((Component, i) => (
+                    <Slide
+                      key={i}
+                      id={'slide-' + i}
+                      index={i}>
+                      <Component />
+                    </Slide>
+                  ))}
+                </Carousel>
+                <Dots
+                  mt={-32}
+                  mx='auto'
+                  index={index}
+                  length={length}
+                  onClick={index => {
+                    this.setState({ index })
+                  }}
+                />
+              </Wrapper>
+            </Provider>
           </MDXProvider>
         </ThemeProvider>
-      </Provider>
+      </ContextProvider>
     )
   }
 }