Skip to content

Latest commit

 

History

History
133 lines (85 loc) · 2.5 KB

components.md

File metadata and controls

133 lines (85 loc) · 2.5 KB
Raw

Components

MDX Deck includes components to help with creating presentations. These components are provided with MDX's shortcodes functionality, so they do not need to be imported.

Head

Use the Head component to set content in the document head.

// example for twitter cards

<Head>
  <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="https://example.com/card.png" />
</Head>

Notes

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

# Slide Content

<Notes>

- Only visible in presenter mode
- Markdown syntax can be used with empty lines around the content

</Notes>

Header

Use the Header component to render a persistent header (at the top of the screen) across the entire presentation.

<Header>

Put a logo, handle, or something else here...

</Header>

# My Presentation

Footer

The Footer component renders a persistent footer (at the bottom of the screen) across the entire presentation.

<Footer>

Put a logo, handle, or something else here...

</Footer>

# My Presentation

Steps

Use the Steps (formerly Appear) component to make child elements appear one at a time within a single slide. Use the left and right arrow keys to step through each element.

<Steps>

- One
- Two
- Three
- Four

</Steps>

Internally, the Steps component uses the useSteps hook, which can be used to build custom components with similar behavior.