Merges its props onto its immediate child. This is a utility component used internally by other components to enable the asChild pattern.
import { Slot } from "@ngrok/mantle/slot";
<Slot className="rounded bg-blue-500 px-4 py-2 text-white">
<a href="https://ngrok.com">Visit ngrok</a>
</Slot>
<Slot className="rounded bg-red-500 px-4 py-2 text-white">
<button type="button">Click me</button>
</Slot>Usage with asChild
The Slot component is the foundation of the asChild pattern used throughout Mantle. When a component supports asChild, it uses Slot internally to merge its props onto the child element instead of rendering a wrapper.
import { Button } from "@ngrok/mantle/button";
<Button appearance="filled" asChild>
<Link to="https://ngrok.com">Visit ngrok</Link>
</Button>
<Button appearance="outlined" asChild>
<a href="https://github.com/ngrok/ngrok">View on GitHub</a>
</Button>Class Name Merging
Slot automatically merges className props using Tailwind CSS's merge logic. Child classes take priority over parent classes for conflicting styles, while non-conflicting classes are preserved.
Child bg-red-500 wins, parent px-4 and py-2 merge
import { Slot } from "@ngrok/mantle/slot";
<Slot className="rounded bg-blue-500 px-4 text-white">
<div className="bg-red-500 py-2">
Child bg-red-500 wins, parent px-4 and py-2 merge
</div>
</Slot>
// Result: className="bg-red-500 rounded px-4 py-2 text-white"API Reference
Slot
Merges its props onto its immediate child element. Automatically handles className merging with Tailwind CSS merge logic.
Based on Radix UI Slot.