Embed

Use embed components when the reader needs to watch a video, inspect a live demo, open a design preview, or review external media inline with the documentation.

YouTube#

Use YouTube with an id prop. The value is the video ID from the YouTube URL, not the full URL.

<YouTube id="dQw4w9WgXcQ" />

Options#

Pass the original mdx-embed options when you need more control.

<YouTube id="M7lc1UVf-VE" aspectRatio="16:9" noCookie />

Use skipTo when the useful part starts later in the video.

<YouTube id="M7lc1UVf-VE" skipTo={{ m: 1, s: 30 }} />

X / Twitter#

Use Tweet when a post is the source material for the explanation. Pass the full tweet URL to tweetLink.

<Tweet tweetLink="https://x.com/irsyad/status/2075300400174146025" />

Vimeo#

Use Vimeo for hosted product videos, tutorials, talks, or walkthroughs that should stay embedded in the page.

<Vimeo id="76979871" />

CodePen#

Use CodePen for small front-end demos where readers need to inspect the result and source together.

<CodePen id="abPzaQ" height={420} />

CodeSandbox#

Use CodeSandbox for larger runnable examples that need a full project environment.

<CodeSandbox id="new" />

Figma#

Use Figma when the documentation needs to reference a design file, frame, or component spec.

<Figma
  title="Component preview"
  url="https://www.figma.com/file/example/project"
/>

Spotify#

Use Spotify for podcast episodes, playlists, or audio references that belong directly in the page flow.

<Spotify spotifyLink="https://open.spotify.com/track/example" />

SoundCloud#

Use SoundCloud for hosted audio clips, interviews, or previews that are easier to play inline.

<SoundCloud soundCloudLink="https://soundcloud.com/example/track" />

Replit#

Use Replit for examples readers can run or remix without leaving the docs.

<Replit repl="https://replit.com/@user/project" />

Supported Props#

YouTube, Vimeo, CodePen, and CodeSandbox support a short id prop. The wrapper maps it to the original mdx-embed prop internally.