Slot

Utility

Flexible child composition slot.

Preview

Slot merges its props onto its child element, enabling composition patterns.

This text receives Slot's className

Usage

example.jsx

import { Slot } from "@/components/ui/slot";

export default function Example() {
  return <Slot />;
}

Source Code

Copy this file into components/ui/slot.jsx in your project.

slot.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Slot = forwardRef(({ children, className, ...props }, ref) => {
  if (!children) return null;
  if (typeof children === "function") return children({ ref, className, ...props });
  return <div ref={ref} className={cn(className)} {...props}>{children}</div>;
});
Slot.displayName = "Slot";

export { Slot };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge