# 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

```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 `src/lib/shortcodes.ts` to see all available components: `CustomButton`, `Accordion`, `Notice`, `Tabs`, `Tab`, `Testimonial`, `ListCheck`, `ImageList`, `ImageItem`, `VideoInline`, `CardWrapper`, and `Card`.