PeekIn is a full-screen immersive overlay for focused, in-context tasks.

PeekIn is a full-screen immersive overlay used to surface a focused task or detailed view without navigating away from the current context. Trigger it from anywhere, then compose its contents from PeekInHeader, PeekInContent, an optional PeekInFooter, and an optional PeekInPanel side rail.

Open/closed state is controlled with the open prop and reported back through onOpenChange.

Give the overlay an accessible name with aria-label. It is derived from PeekInHeader's title when that is a plain string, so aria-label is required whenever the title is composed of elements rather than text.

() => {
  const [open, setOpen] = useState(false)

  return (
    <Box>
      <Button appearance='primary' onClick={() => setOpen(true)}>
        Open PeekIn
      </Button>

      <PeekIn open={open} onOpenChange={setOpen} closeButtonAriaLabel='Close'>
        <PeekInHeader title='Post Analytics' subtitle='Last 30 days' />
        <PeekInContent>
          <Text.BodyCopy as='p'>
            Main content — charts, graphs, or post details go here.
          </Text.BodyCopy>
        </PeekInContent>
        <PeekInFooter
          cancelButton={<Button>Cancel</Button>}
          primaryButton={<Button appearance='primary'>Save</Button>}
        />
        <PeekInPanel title='Ask Trellis'>
          <Text.BodyCopy as='p'>
            AI-powered insights and suggestions appear in this side panel.
          </Text.BodyCopy>
        </PeekInPanel>
      </PeekIn>
    </Box>
  )
}

Omit PeekInPanel for a simple header-and-content layout when no supplemental rail is needed.

Footer

PeekInFooter pins the overlay's actions below the scrolling content, and takes the same slots as ModalFooter:

• primaryButton — the main action. Closes the overlay unless closeOnPrimaryAction is false, which you want when the action is async and the overlay should stay open until it settles.
• cancelButton — always closes the overlay.
• leftAction — pinned far left, for destructive actions. Never closes the overlay, so you own its confirmation flow.

On desktop the footer spans the main column only, leaving PeekInPanel its full height. On mobile it pins to the bottom of the sheet.

Properties