Using Components

MDX lets you embed JSX components inside Markdown. Put reusable components in components/ and use them in any page.

Create a Component

// components/Callout.jsx
export default function Callout(props, ...children) {
	return <div class="callout">{...children}</div>
}

Use It in MDX

<Callout>
  Tip: Keep sections short and focused.
</Callout>

Client Components

If a component depends on browser APIs, add the .client suffix:

components/Map.client.jsx

Counter Example

A simple interactive example:

// components/Counter.client.jsx
import './Counter.css'
import { signal } from 'refui'

export default function Counter({ initial = 0 }) {
	const count = signal(initial)
	return (
		<div class="counter">
			<button on:click={() => count.value--}>-</button>
			<span>{count}</span>
			<button on:click={() => count.value++}>+</button>
		</div>
	)
}

Because this component uses a CSS import (which isn't supported during server-side static rendering), you need to create a separate version for static rendering:

// components/Counter.static.jsx
export default function Counter({ initial = 0 }) {
	return (
		<div>
			[ You need to enable JavaScript to load this component. ]
		</div>
	)
}

Use it in a page:

<Counter />

Live preview:

[ You need to enable JavaScript to load this component. ]

For advanced usage, see Custom Components.