Portal

Utility

Renders children into a DOM portal.

Preview

Portal renders children into a different part of the DOM tree. Useful for modals, tooltips, and overlays.

Usage

example.jsx

import { Portal } from "@/components/ui/portal";

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

Source Code

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

portal.jsx

"use client";

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";

function Portal({ children, container }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return createPortal(children, container || document.body);
}

export { Portal };

Quick Install

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

npm install clsx tailwind-merge