# MDX Components And Shortcodes

## MDX Components And Shortcodes

These themes auto-import MDX components so you can use them without manual imports.

### Where They Come From

- Components live in `src/layouts/shortcodes/`.
- Auto-import is configured in `astro.config.mjs` under `AutoImport`.

### 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 `astro.config.mjs` and check the `AutoImport` list to see all available components.