+
+
+ Close
+
+
+
+
+ );
+}
+
+function ExpandIcon(props: React.ComponentProps<'svg'>) {
+ return (
+
+ );
+}
+
+function CloseIcon(props: React.ComponentProps<'svg'>) {
+ return (
+
+ );
+}
diff --git a/docs/src/app/(docs)/react/components/fullscreen/demos/portal/index.ts b/docs/src/app/(docs)/react/components/fullscreen/demos/portal/index.ts
new file mode 100644
index 00000000000..07771a187d8
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/fullscreen/demos/portal/index.ts
@@ -0,0 +1,8 @@
+import { createDemoWithVariants } from 'docs/src/utils/createDemo';
+import CssModules from './css-modules';
+import Tailwind from './tailwind';
+
+export const DemoFullscreenPortal = createDemoWithVariants(import.meta.url, {
+ CssModules,
+ Tailwind,
+});
diff --git a/docs/src/app/(docs)/react/components/fullscreen/demos/portal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fullscreen/demos/portal/tailwind/index.tsx
new file mode 100644
index 00000000000..d3845819488
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/fullscreen/demos/portal/tailwind/index.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Fullscreen } from '@base-ui/react/fullscreen';
+
+export default function ExampleFullscreenPortal() {
+ return (
+
+
+
+ Open fullscreen
+
+
+
+
+ Mounted only when open
+
+
+ This content is only mounted while in fullscreen.
+
+
+
+ Close
+
+
+
+
+ );
+}
+
+function ExpandIcon(props: React.ComponentProps<'svg'>) {
+ return (
+
+ );
+}
+
+function CloseIcon(props: React.ComponentProps<'svg'>) {
+ return (
+
+ );
+}
diff --git a/docs/src/app/(docs)/react/components/fullscreen/page.mdx b/docs/src/app/(docs)/react/components/fullscreen/page.mdx
new file mode 100644
index 00000000000..22107678133
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/fullscreen/page.mdx
@@ -0,0 +1,265 @@
+# Fullscreen
+
+Presents an element in fullscreen using the browser Fullscreen API.
+
+
+import { DemoFullscreenHero } from './demos/hero';
+
+
+
+## Usage guidelines
+
+- **User gesture required:** Browsers only honor `requestFullscreen()` while the window has [transient activation](https://html.spec.whatwg.org/multipage/interaction.html#transient-activation) — granted by a recent user interaction (click, tap, keypress) and valid for roughly five seconds. The bundled `` always satisfies this. Flipping `open` from any external handler triggered by a user gesture (including a deferred `setTimeout` that still runs within the activation window) also works. Requests fired without a recent gesture are rejected.
+- **Browser support:** Fullscreen is unavailable on iOS Safari for iPhone (only iPad iOS 16.4+ supports `requestFullscreen()` on arbitrary elements). When the API is unavailable for the container's owner document, `` is automatically disabled (`data-disabled`, `aria-disabled="true"`). The `supported` state is also exposed on Root, Trigger, Container, and Close so you can render fallback UI.
+- **Inside iframes:** The hosting `