Copy page

Utility

Slot

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

Code
import { Slot } from "zudoku/components";

Components

The Slot system consists of two main components:

Slot.Target

Renders content that has been injected into a specific slot.

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

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.

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

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

Code
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>
  );
}

Type Safety

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

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

Adding Custom Slot Names

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

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

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.

Code
// 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" />

For basic configuration usage, see the Slots Configuration documentation.