# Custom components reference

Copy as Markdown[View as Markdown](/docs/development/components/custom-components/reference.md)

***

## Component directory[​](#component-directory "Direct link to Component directory")

Custom components live in the `components` directory at the root of your catalog.

```
my-catalog/
└── components/
    ├── service-card.astro
    └── reusable-note.mdx
```

## Import path[​](#import-path "Direct link to Import path")

Use the `@catalog/components` alias to import custom components.

```
import ServiceCard from '@catalog/components/service-card.astro';
```

## Supported file types[​](#supported-file-types "Direct link to Supported file types")

| File type | Use for                                                         |
| --------- | --------------------------------------------------------------- |
| `.astro`  | Reusable UI, props, data fetching, browser scripts, and styling |
| `.mdx`    | Reusable Markdown content                                       |

## Astro component structure[​](#astro-component-structure "Direct link to Astro component structure")

Astro components have a component script and a component template.

```
---
// Component script
const { title } = Astro.props;
---

<!-- Component template -->
<h2>{title}</h2>
```

Read the [Astro components documentation](https://docs.astro.build/en/basics/astro-components/) for the full syntax.

## Props[​](#props "Direct link to Props")

Read props with `Astro.props`.

```
---
const { title, summary } = Astro.props;
---
```

Pass props from MDX.

```
<ServiceCard title="Order Service" summary="Handles customer orders." />
```

## Frontmatter[​](#frontmatter "Direct link to Frontmatter")

Resource frontmatter can be passed into components from MDX pages.

```
<ServiceCard title={frontmatter.name} summary={frontmatter.summary} />
```

## Catalog config[​](#catalog-config "Direct link to Catalog config")

Import `eventcatalog.config.js` values with `@config`.

```
---
import config from '@config';
---

<span>{config.title}</span>
```

## Data fetching[​](#data-fetching "Direct link to Data fetching")

Use `await fetch()` in Astro component frontmatter for build-time data.

```
---
const response = await fetch('https://api.example.com/status');
const status = await response.json();
---
```

Use browser JavaScript when data should be fetched after the page loads.

```
<div data-status class="not-prose">Loading...</div>

<script>
  const response = await fetch('/status.json');
  const data = await response.json();
  document.querySelector('[data-status]').textContent = data.status;
</script>
```

## Related documentation[​](#related-documentation "Direct link to Related documentation")

* [Using components](/docs/development/components/using-components.md)
* [Built-in components](/docs/components.md)
* [Astro components](https://docs.astro.build/en/basics/astro-components/)
* [Astro data fetching](https://docs.astro.build/en/guides/data-fetching/)
* [Astro client-side scripts](https://docs.astro.build/en/guides/client-side-scripts/)