Welcome to Zudoku preview! Open a GitHub issue if you have feature requests or find any issues.
Zudoku
Components

Slot Component

The Slot component provides low-level access to Zudoku's slot system, allowing you to programmatically manage content injection in custom pages and React components.

Import

import { Slot } from "zudoku";
tsx

Components

The Slot system consists of two main components:

Slot.Target

Renders content that has been injected into a specific slot.

<Slot.Target name="my-slot" fallback={<div>No content</div>} />
tsx

Props:

  • name (required): The slot name to render content for
  • fallback (optional): Content to show when no slot content is available

Slot.Source

Injects content into a specific slot. This component renders nothing but registers content to be displayed by Slot.Target components.

<Slot.Source name="my-slot" type="append"> <div>Content to inject</div> </Slot.Source>
tsx

Props:

  • name (required): The slot name to inject content into
  • type (optional): How to handle multiple content sources
    • "replace" (default): Replace existing content
    • "prepend": Add before existing content
    • "append": Add after existing content
  • children: The content to inject

Usage Example

function MyCustomPage() { return ( <div> <h1>My Page</h1> {/* Render slot content here */} <Slot.Target name="custom-page-header" /> {/* Inject content into a slot */} <Slot.Source name="custom-page-header"> <div className="bg-blue-100 p-4 rounded">Custom header content</div> </Slot.Source> <p>Page content here...</p> </div> ); }
tsx

Type Safety

The Slot component is fully type-safe. All predefined slot names are available with autocomplete:

// These will show autocomplete for available slot names <Slot.Target name="head-navigation-end" /> <Slot.Source name="footer-before">Content</Slot.Source>
tsx

Adding Custom Slot Names

To add your own slot names with full type safety, augment the CustomSlotNames type:

// types/slots.d.ts declare module "zudoku" { type CustomSlotNames = "my-custom-header" | "sidebar-extra"; }
tsx

Integration with Configuration

The Slot component works with configuration-based slots. Content defined in your zudoku.config.tsx and content injected via Slot.Source components will be combined according to the type parameter.

// In zudoku.config.tsx slots: { "page-header": <div>Config header</div> } // In your component <Slot.Source name="page-header" type="append"> <Button>Go Home</Button> </Slot.Source> // Renders both: Config header, then Component button <Slot.Target name="page-header" />
tsx

For basic configuration usage, see the Slots Configuration documentation.