FullscreenOverlay

Portal-based fullscreen overlay with Escape-to-close

Default

Usage

import { FullscreenOverlay } from '@tryvienna/ui'

<>
  <Button onClick={() => setOpen(true)}>Open Fullscreen</Button>
  <FullscreenOverlay open={open} onClose={() => setOpen(false)}>
    <div className="flex-1 flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Fullscreen Content</h2>
        <p className="text-muted-foreground mb-4">Press Escape or click the X to close</p>
        <Button onClick={() => setOpen(false)}>Close</Button>
      </div>
    </div>
  </FullscreenOverlay>
</>

Examples

Default

Default

<>
  <Button onClick={() => setOpen(true)}>Open Fullscreen</Button>
  <FullscreenOverlay open={open} onClose={() => setOpen(false)}>
    <div className="flex-1 flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-4">Fullscreen Content</h2>
        <p className="text-muted-foreground mb-4">Press Escape or click the X to close</p>
        <Button onClick={() => setOpen(false)}>Close</Button>
      </div>
    </div>
  </FullscreenOverlay>
</>

With Toggle Button

With Toggle Button

<div className="flex items-center gap-4">
  <FullscreenButton
    isFullscreen={isFullscreen}
    onClick={() => setIsFullscreen(!isFullscreen)}
  />
  <span className="text-sm text-muted-foreground">
    {isFullscreen ? 'Fullscreen' : 'Normal'}
  </span>
</div>

API Reference

FullscreenOverlay

Prop	Type	Default	Description
open	boolean	-
onClose	() => void	-

Data Attributes

Component	data-slot
FullscreenOverlay	"fullscreen-overlay"