Playground
MDX
Loading playground...
Usage
Basic Usage
import { Playground } from 'nextra/components'
# Playground
Below is a playground component. It mixes into the rest of your MDX perfectly.
<Playground
source="## Hello world"
components={{ h2: props => <h2 {...props} className="myClass" /> }}
/>You may also specify a fallback component like so:
Usage with Fallback
import { Playground } from 'nextra/components'
<Playground
source="## Hello world"
components={{ h2: props => <h2 {...props} className="myClass" /> }}
fallback={<div>Loading playground...</div>}
/>Usage with nextra-theme-docs/ nextra-theme-blog
To avoid have unstyled elements, import useMDXComponents from corresponding
theme, call it and pass returned components in components prop, your custom
components can be passed in first argument:
import { useMDXComponents } from 'nextra-theme-docs'
import { Playground } from 'nextra/components'
<Playground
source="## Hello world"
components={useMDXComponents({
h2: props => <h2 {...props} className="myClass" />
})}
fallback={<div>Loading playground...</div>}
/>