Skip to main content

Custom components reference

View as Markdown

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​

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

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

Supported file types​

File typeUse for
.astroReusable UI, props, data fetching, browser scripts, and styling
.mdxReusable Markdown content

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 for the full syntax.

Props​

Read props with Astro.props.

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

Pass props from MDX.

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

Frontmatter​

Resource frontmatter can be passed into components from MDX pages.

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

Catalog config​

Import eventcatalog.config.js values with @config.

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

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

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>