Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time


Each slide can include a custom layout around its content. This is a way to provide templates for certain slides.

// example Layout.js
import React from 'react'

export default ({ children }) => (
      width: '100vw',
      height: '100vw',
      backgroundColor: 'tomato',
import Layout from './Layout'

# No Layout



# Custom Layout


The layout component will wrap the MDX elements within that slide, which means you can use a nested ThemeProvider or target elements with CSS-in-JS.

NOTE: The newlines around child content in the layout component is required to use markdown syntax in a layout. Otherwise the content will be parsed as raw text.

Built-in Layouts

MDX Deck includes a few built-in layouts for common slide variations.


Inverts the foreground and background colors from the theme.

import { Invert } from 'mdx-deck'

# 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'



## Meow



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

import { SplitRight } from 'mdx-deck'



## Meow



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


Renders code blocks fullscreen.

import { FullScreenCode } from 'mdx-deck'