Skip to content
Branch: master
Find file Copy path
Find file Copy path
Update docs 6e8a5c5 Apr 13, 2019
1 contributor

Users who have contributed to this file

163 lines (104 sloc) 2.96 KB


MDX Deck includes a few built-in components to help with creating presentations.


Use the <Head /> component to set content in the document head.

// example for twitter cards
import { Head } from 'mdx-deck'

  <title>My Presentation</title>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@jxnblk" />
  <meta name="twitter:title" content="My Presentation" />
  <meta name="twitter:description" content="A really great presentation" />
  <meta name="twitter:image" content="" />


Use the <Image /> component to render a fullscreen image (using the CSS background-image property).

import { Image } from 'mdx-deck'

<Image src="kitten.png" />


  • src (string) image URL
  • size (string) CSS background-size


Use the <Appear /> component to make its children appear one at a time within a single slide. Use the left and right arrow keys to step through each element.

import { Appear } from 'mdx-deck'


Internally, the <Appear /> component uses the <Step /> component, which can be used to build custom components with similar behavior.

Speaker Notes

Speaker notes that only show in presenter mode can be added to any slide with the Notes component.

import { Notes } from 'mdx-deck'

# Slide Content

<Notes>Only visible in presenter mode</Notes>


MDX Deck includes a few built-in layouts for common slide variations. Export a layout as the default within a slide to wrap the contents.


Inverts the foreground and background colors from the theme.

import { Invert } from 'mdx-deck/layouts'

# Normal



# Inverted



Creates a horizontal layout with the first child on the left and all other children on the right.

import { Split } from 'mdx-deck/layouts'



## Meow



Same as the Split component, but renders the first child on the right.

import { SplitRight } from 'mdx-deck/layouts'



## Meow



Similar to the Split components, but renders all children side-by-side


Render fenced code blocks fullscreen.

import { FullScreenCode } from 'mdx-deck/layouts'






The Embed component is intended for use outside of an MDX Deck to render a preview of a particular slide. This can be used to embed slide previews in other places, like a blog post write-up of a presentation.

import React from 'react'
import { Embed } from '@mdx-deck/components'
import deck from './my-deck.mdx'

export default props => (
    <h2>Second Slide</h2>
    <Embed src={deck} slide={2} />
You can’t perform that action at this time.