---
title: Embed
description: Add responsive third-party media embeds to MDX pages without importing React components in every file.
---

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" />

```tsx
<YouTube id="dQw4w9WgXcQ" />
```

### Options

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

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

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

```tsx
<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" />

```tsx
<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.

```tsx
<Vimeo id="76979871" />
```

## CodePen

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

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

## CodeSandbox

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

```tsx
<CodeSandbox id="new" />
```

## Figma

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

```tsx
<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.

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

## SoundCloud

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

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

## Replit

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

```tsx
<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.

| Component | Short prop | Original prop |
| --- | --- | --- |
| `YouTube` | `id` | `youTubeId` |
| `Vimeo` | `id` | `vimeoId` |
| `CodePen` | `id` | `codePenId` |
| `CodeSandbox` | `id` | `codeSandboxId` |

<Callout type="default">
  Embeds load external content from the provider. Use them only when the embedded media is part of the page's explanation, not as decoration.
</Callout>