MDX Components And Shortcodes

MDX Components And Shortcodes

Folex makes these components available in .mdx content files, so you can use them without manual imports.

In the Tina edition, the rich text editor’s Embed button adds them. In the Sanity edition, the body text field in the Studio has them.

Where They Come From

• Components live in src/layouts/shortcodes/.
• The list is in src/lib/shortcodes.ts. To add your own component, add it to this list.

Use A Component In MDX

1. Open any .mdx file in src/content/.
2. Add the component tag in the content body.
3. Save and refresh the page.

Examples

<Tabs>
  <Tab name="Overview">
    This is the first tab.
  </Tab>
  <Tab name="Details">
    This is the second tab.
  </Tab>
</Tabs>

<Accordion label="FAQ 1" group="faq" expanded="true">
  This is the accordion content.
</Accordion>

Tip

Open src/lib/shortcodes.ts to see all available components: CustomButton, Accordion, Notice, Tabs, Tab, Testimonial, ListCheck, ImageList, ImageItem, VideoInline, CardWrapper, and Card.