Custom components

When the built-ins aren't enough, add your own. Create src/mdx-components.tsx in your project and default-export a record of components — every page can then use them without imports.

import { Callout } from '@fiskil/docs/mdx';

function SecurityNote({ children }: { children: React.ReactNode }) {
  return (
    <Callout type="warning" title="Security note">
      {children}
    </Callout>
  );
}

export default { SecurityNote };

Then, in any page:

<SecurityNote>Rotate credentials after every incident drill.</SecurityNote>

Composing with engine primitives

Import building blocks from @fiskil/docs/mdx rather than reinventing them: Callout, Card/Cards, Steps/Step, Tabs/Tab, code block parts, Mermaid, Update/Updates, and Heading are all exported. Components built this way inherit your theme automatically.

Overriding built-ins

Export a component under a built-in's name and yours wins — export Note and every <Note> across the site renders your version. Use sparingly; it's most useful for adding house style to a common primitive.

Rules of the road

• The file is optional — no src/mdx-components.tsx, no problem.
• Accepted names: src/mdx-components.tsx, .ts, .jsx, or .js, default export only.
• Client-side interactivity needs 'use client' at the top of the file, same as any React component.
• Custom components ship with your source on publish, and work identically on the platform build.