# 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

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

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

### Tip

Open that list to see all available components.