1import { Slot } from "@/components/ui/slot";
2
3export function MyComponent() {
4    return (
5        <Slot.Root className="w-full flex items-center justify-between">
6            <div>
7                <span>Hello,</span>
8                <span>World!</span>
9            </div>
10        </Slot.Root>
11    );
12};

1import type { ReactNode, HTMLAttributes } from "react";
2
3import { cloneElement, isValidElement } from "react";
4
5interface SlotProps extends HTMLAttributes<HTMLElement> {
6    children: ReactNode
7};
8
9const Slot = function ({ children, ...props }: SlotProps) {
10    if (!isValidElement(children)) {
11        console.warn("Slot expects a single valid React element as child.");
12
13        return null;
14    };
15
16    return cloneElement(children, { ...props, ...(children.props || {}) });
17};
18
19export namespace SlotProps {
20    export type Root = SlotProps
21}
22
23const SlotExport = {
24    Root: Slot
25};
26
27export {
28    SlotExport as Slot
29};
30
31export default SlotExport;