Custom Components

Any function call in Tiramisu that doesn't match a built-in function automatically becomes a custom Svelte component. This lets you extend your documentation with interactive widgets, custom layouts, or any UI you can build with Svelte.

How It Works

When the Tiramisu compiler encounters an unknown function name, it generates an import for a Svelte component by convention:

• myWidget { } imports src/lib/components/tiramisu/MyWidget.svelte
• apiPlayground { } imports src/lib/components/tiramisu/ApiPlayground.svelte
• videoPlayer { } imports src/lib/components/tiramisu/VideoPlayer.svelte

The function name is converted to PascalCase for the component file name.

Parameters Become Props

Named parameters in the function call become component props. Positional content becomes the default slot (children):

myCard {
  title = My Feature,
  icon = rocket,
  This is the card body content with bold { bold text } and other formatting.
}

This is equivalent to:

<MyCard title="My Feature" icon="rocket">
  <p>This is the card body content with <strong>bold text</strong> and other formatting.</p>
</MyCard>

Creating a Component

Define your component with the expected props:

<script>
  let { title, icon, children } = $props()
</script>

<div class="my-card">
  <h3>{title}</h3>
  {@render children()}
</div>

<style>
  .my-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
  }
</style>

Then use it in any .tiramisu file:

myCard {
  title = Hello World,
  This content will be rendered as children.
}

Overriding Built-in Components

All components — layout and built-in — are imported through a barrel file at src/lib/components/index.ts. This file re-exports the kit defaults:

// src/lib/components/index.ts
export { default as DocsLayout } from "@tiramisu-docs/kit/components/DocsLayout.svelte"
export { default as CodeBlock } from "@tiramisu-docs/kit/components/tiramisu/CodeBlock.svelte"
export { default as Callout } from "@tiramisu-docs/kit/components/tiramisu/Callout.svelte"
// ... other components

To override any component, create your own version and change the export:

// Before
export { default as Callout } from "@tiramisu-docs/kit/components/tiramisu/Callout.svelte"

// After
export { default as Callout } from "./MyCallout.svelte"

Your custom component receives the same props as the built-in version. This works for any component — layout components like DocsLayout and DocPage, or built-in content components like CodeBlock, Tabs, and NavCard.