Component

Slot

Tools for building your own components on Rad UI: Slot, mergeProps and composeRefs.

preview

React
"use client"

import { forwardRef, type ButtonHTMLAttributes } from "react"
import Slot, { mergeProps } from "@radui/ui/Slot"

// A button that can render as its child (for example a link) with `asChild`,
// the same way Rad UI parts do.
type ActionProps = ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }

const Action = forwardRef<HTMLButtonElement, ActionProps>(({ asChild, ...props }, ref) => {
    const merged = mergeProps({ className: "rounded-md border px-3 py-1.5" }, props)
    return asChild ? <Slot ref={ref} {...merged} /> : <button ref={ref} type="button" {...merged} />
})
Action.displayName = "Action"

export default function SlotExample() {
    return (
        <div className="flex gap-3">
            <Action onClick={() => console.log("clicked")}>A button</Action>
            <Action asChild>
                <a href="#slot">A link with the same styles</a>
            </Action>
        </div>
    )
}

Features

Slot gives your components the asChild behavior Rad UI parts use
mergeProps joins classes, merges styles and chains event handlers
composeRefs combines callback and object refs
Works with forwarded refs, so focus and measuring keep working

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Slot, { mergeProps, composeRefs } from "@radui/ui/Slot"

export default () => {
    return (
        <Slot>
            <button />
        </Slot>
    )
}

Slot

Renders its only child and merges its own props and ref onto it, the same way Rad UI parts do with asChild.

Prop	Type	Default
children	ReactElement	--

Merge Props

Merges props objects. Later ones win, except classNames join, styles merge and event handlers chain: the rightmost runs first, and calling event.preventDefault() skips the ones to its left.

Prop	Type	Default
...props	object[]	--

Keyboard Interactions

Shortcut	Description
`None`	These utilities add no keyboard behavior; the rendered element keeps its own.

ARIA References

Reference	What Rad UI follows
Button pattern	Slot keeps the child's semantics; merge onto a native button or link to keep keyboard and screen reader support.