# Portal

Renders children into a DOM node that exists outside the DOM hierarchy.

```tsx
import { Portal } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';
import { useState, useRef } from 'react';

export default function Default() {
	const [disabled, setDisabled] = useState(true);
	const ref = useRef<HTMLDivElement | null>(null);

	const cardClasses = 'card preset-outlined-surface-300-700 size-24 grid place-items-center p-4';
	const buttonClasses = 'col-span-2 btn preset-filled';

	return (
		<div className="grid grid-cols-2 gap-4">
			{/* Source */}
			<div className={cardClasses}>
				<Portal disabled={disabled} target={ref.current ?? undefined}>
					<SkullIcon className="size-8" />
				</Portal>
			</div>

			{/* Target */}
			<div className={cardClasses} ref={ref}>
				{/* (the content will appear here) */}
			</div>

			{/* Trigger */}
			<button className={buttonClasses} onClick={() => setDisabled(!disabled)}>
				{disabled ? 'Enable' : 'Disable'}
			</button>
		</div>
	);
}

```

## How It Works

When enabled, the content will move from the source to the target element.

## API Reference

### PortalRootProps

| Property  | Default       | Type                                                                                                                                                                   | Description                                                                       |
| --------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| disabled? | false         | boolean \| undefined                                                                                                                                                   | If true, the portal functionality is disabled and children are rendered in place. |
| target?   | document.body | HTMLElement \| undefined                                                                                                                                               | The HTML element to which the portal content will be appended.                    |
| children  | -             | string \| number \| bigint \| boolean \| ReactElement\<unknown, string \| JSXElementConstructor\<any>> \| Iterable\<ReactNode> \| ReactPortal \| Promise\<...> \| null | -                                                                                 |