Using Components

MDX allows you to directly embed rEFui JSX components within your Markdown. By placing reusable components in the components/ directory, they become seamlessly integrated and available for use across all pages.

Component Creation

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

Utilization in MDX

<Callout>
  Tip: Maintain concise and focused sections to improve readability.
</Callout>

Client-side Interactivity

For components that require access to browser-specific APIs, append the .client suffix to the filename:

components/Map.client.jsx

Interactive Example: Counter

Below is a simple interactive component:

// 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>
	)
}

As this component includes a CSS import (which is incompatible with server-side static rendering), a corresponding static version must be provided for the build process:

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

Invoking the component within a page:

<Counter initial={5}/>

Live Preview:

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

For more advanced component patterns, refer to Custom Components.