Articles on: Components

Component: GifEmbed

Purpose

Displays an animated GIF image, similar to a regular image but potentially with specific styling or handling for GIFs.



When to Use

  • Showing short animations or screen recordings.
  • Adding visual interest or humor (use sparingly!).
  • Illustrating a quick process visually.



How to Use (Options / Props)



Option (prop)

Description

Required?

Example Value(s)

src

The URL path to the GIF file.

Yes

/images/animations/demo.gif

alt

Text description of the GIF for accessibility.

Yes

"Animation showing button click"

caption

Optional text displayed below the GIF.

No

"Fig. 1: Saving the file."



Example MDX Usage



Simple GIF:

<GifEmbed
  src="/gifs/loading-spinner.gif"
  alt="Loading animation spinner"
/>



GIF with a Caption:

<GifEmbed
  src="/images/demos/quick-feature-demo.gif"
  alt="Short demo showing the new feature in action"
  caption="Quick look at the drag-and-drop interface."
/>


Updated on: 13/05/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!