Zuplo
Components

Slot Component

This documentation is for the preview version of the Dev Portal. If you are not part of the preview program, please refer to the current Dev Portal docs.

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.