# 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

```tsx
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.

```tsx
<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.

```tsx
<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

```tsx
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:

```tsx
// 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:

```tsx
// 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.

```tsx
// 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](/dev-portal/zudoku/configuration/slots)
documentation.