Sprout Social

Components

PeekIn

View on GitHub

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, and an optional PeekInPanel side rail.

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

import { PeekIn,PeekInHeader,PeekInContent,PeekInPanel } from '@sproutsocial/racine'
() => {

  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' />

        <PeekInContent>

          <Text.BodyCopy as='p'>

            Main content — charts, graphs, or post details go here.

          </Text.BodyCopy>

        </PeekInContent>

        <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.

Properties

NameTypeDefaultDescriptionRequired?
closeButtonAriaLabel
string
"Close"
Aria label for the built-in close button
actions
TypePeekInActionProps[]
Additional action buttons shown in the action bar alongside the close button
panelToggle
{ /** Icon name for the panel toggle button */ iconName: TypeIconName; /** Accessible label. Default: "Toggle panel" */ "aria-label"?: string; }
Show a panel toggle button in the action bar. Requires PeekIn.Panel to be present.
snapPoints
TypeDrawerSnapPoint[]
Snap points the mobile bottom-sheet rendering can rest at when swiped. Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings accept `px`/`rem`. Ignored on desktop (full-screen modal).
defaultSnapPoint
| TypeDrawerSnapPoint
| null
Initial snap point for uncontrolled use. Mobile only.
snapPoint
| TypeDrawerSnapPoint
| null
Controlled active snap point. Pair with `onSnapPointChange`. Mobile only.
onSnapPointChange
(snapPoint: TypeDrawerSnapPoint | null) => void
Fires when the active snap point changes. Mobile only.
snapToSequentialPoints
boolean
When true, fast swipes can't skip past adjacent snap points. Mobile only.
disableCloseOnClickOutside
boolean
When true, the mobile bottom-sheet rendering does not dismiss when the user taps outside the popup. Useful with snap points so a low-snap peek stays open while the user interacts with nested content.
actionsInHeader
boolean
Opt out of the mobile action rail (default) and render `actions`, the panel toggle, and close button inline in the bottom-sheet header instead. Required for snap-point layouts where the rail would collide with the fully-expanded popup. Ignored on desktop (full-screen modal).
children
React.ReactNode