Slots

Customize component content using slots—similar to Vue or Web Components. Define slots in your template and fill them when using the component.

Default Slot

Child content of an x-component element automatically goes into the default slot—no wrapper needed:

<!-- In your template -->
<div class="card">
    <slot>Default content if nothing provided</slot>
</div>

<!-- When using -->
<div x-component="card">
    <p>This replaces the default slot content.</p>
</div>

Only one default slot is allowed per template. A component can have both a default slot and named slots.

Named Slots

Use named slots for more complex layouts:

<!-- In your template -->
<article>
    <header>
        <slot name="header">Default Header</slot>
    </header>
    <slot name="body">Default Body</slot>
    <footer>
        <slot name="footer">Default Footer</slot>
    </footer>
</article>

Filling Named Slots

<div x-component="modal">
    <slot name="header">
        <h3>Custom Title</h3>
    </slot>
    <slot name="body">
        <p>Custom body content with <strong>HTML</strong>.</p>
    </slot>
</div>

Slot Comparison

See the difference between default and customized components:

Fallback Content

Slots can have default content that shows when no content is provided:

<!-- Template with fallback -->
<slot name="icon">
    <svg>...default icon...</svg>
</slot>

<!-- Usage without slot content - shows default icon -->
<div x-component="button"></div>

<!-- Usage with slot content - shows custom icon -->
<div x-component="button">
    <slot name="icon">
        <img src="custom-icon.svg">
    </slot>
</div>

Validation

Alpine Components validates slot usage and logs console warnings for:

• Content without slots — If a component has no slots but you provide child content, it's discarded
• Missing slot — If you provide content for a slot that doesn't exist in the template, it's discarded
• Duplicate default slots — Templates should have at most one default <slot>
• Duplicate named slots — Each slot name should be unique in the template

Best Practices

• Use semantic slot names — header, body, footer, trigger
• Provide sensible defaults — Components should work without any slots filled
• Document your slots — List available slots in your component's README
• Keep slots focused — Each slot should have a single purpose