MDX Components And Shortcodes

MDX Components And Shortcodes

You can use these components in body content without an import line.

Where They Come From

• Components live in src/layouts/shortcodes/.
• The list is src/lib/shortcodes.ts, or AutoImport in astro.config.mjs, depending on the theme.
• In the Tina edition, the rich text editor’s Embed button adds them. In the Sanity edition, body text is edited in the Studio, and the components are blocks in the body field.

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 that list to see all available components.