Deck

This is the main component, which creates the slide deck on your page.

Properties

Examples

import Presentation from 'my-presentation.mdx'
ReactDOM.render(
  <Deck>
    <Presentation />
  </Deck>,
  document.getElementById('root')
);

Note

This component can be used to add notes to certain slides, which can be used in presenter mode.

Properties

Examples

# SLIDE 1
This is the first slide.
<Note>
These are notes that are only shown in presenter mode.  
They can help you not to forget what you need to say.
- You can also use markdown syntax inside of here!
- This will work as __intended__
</Note>
---
# SLIDE 2
<Step>
- This slide contains 3 steps
- Step 2
- Step 3
</Step>
<Note end="-1">
This note will be removed for the last step of this slide.
</Note>
<Note start="1">
This note will only show with the second step.
</Note>

Step

This component can be used inside your slides, to step through certain items. It generates a step for each of its direct children and can style them depending on their respective order and the current stepIndex. The most common use case is to make items appear or disappear in order.

If this component only has one child, it will implement the stepping behaviour on it's children. If the child component happens to be a table, it will step through its rows or columns, depending on the useColumns property.

Properties

NOTE
The styles are applied to the children according to the following rules:

• All children elements get base styles.
• Children whose index is greater than the stepIndex (aka they have not been stepped through), get styled with before.
• Children whose index is equal to the stepIndex, get styled with current if it exists.
• Children whose index is smaller or equal to the stepIndex (aka they have been stepped through), get styled with after.

When different styles get applied to a child element, they get combined using spread operators, in the following order:

1. styles.base
2. styles.before
3. styles.after
4. styles.current

Examples

Show
# SLIDE 1
<Step>
By wrapping your content in a `<Step />`, you can uncover them one by one.
Pretty neat right ?  
</Step>
---
# SLIDE 2
<Step offset={0}>
You can even mix and match different types of elements.  
Here we show a paragraph.
1. And here is a numbered list.
2. Damn, all elements show up at once
3. What could we do to solve this ?
<Step>
- Can we nest `<Step />` components ?
- Sure we can
- And if it only has one child, it will step through its children
- Now that's wicked!
</Step>
</Step>
---
# SLIDE 3
<Step styles={{
  base:     {transition: 'opacity 0.5s ease-in-out'},
  before:   {opacity: 0},
  after:    {opacity: 1},
}}>
- We can also apply some basic styling for the different states
- This can allow for some really modern looking slides
- People will look in awe at your beatifully crafted slide deck
- Sadly, this demo runtime makes everything flicker
- But trust me, this is not the case with real slide decks!
</Step>

Zoom

Zoom the content inside of it to a fixed aspect ratio with css scaling.

This component has not much to do with presentations, but is used throughout the core codebase and might be useful to use.
One of its use cases is to wrap your presentation, so that you keep the same look of your presentation on small displays.

Properties