overlays / stable

Peek

Non-modal record peek — floats inset like the page shell (rounded card, shell inset), slides in/out from the right, resizable, cookie-persisted width. Enter expands within the same inset.

LIVE PREVIEW

Loading preview…

When to use

Space-to-peek on a list row (details beside the list).
Quick inspection of a record without leaving the page.

Consider an alternative

Modal forms that must trap focus — use Sheet or Dialog.
Full-page records — use a route + Page frame.

Import

import { Peek } from '@revido-llc/kit';

Keyboard interaction

Enter — expand / collapse to full width (focus inside)
Escape — close when focus is inside
← / → on resize handle — nudge width

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


aria-label	string	—	Accessible name when there is no PeekTitle.
children	ReactNode	—
className	string	—
defaultExpanded	boolean	false
defaultOpen	boolean	—
defaultWidth	number	DEFAULT_WIDTH_PX	Initial width in px when no cookie is set. Default 480.
expanded	boolean	—	Controlled expanded (full-width) state.
isOpen	boolean	—
onExitComplete	(() => void)	—	Fires after the close slide-out finishes. Keep the Peek mounted until then so exit motion can play.
onExpandedChange	((expanded: boolean) => void)	—
onOpenChange	((isOpen: boolean) => void)	—
widthCookie	string	—	Cookie name used to remember the peek width across sessions (e.g. `"revido-peek-width"`). Omit to skip persistence.

Related exports

PeekHeader, PeekTitle, PeekDescription, PeekBody, PeekFooter, PeekClose, peekWidthFromCookie

Examples

Resizable peek

<Peek isOpen={open} onOpenChange={setOpen} widthCookie="revido-peek-width">
  <PeekHeader>
    <EditableTitle value={title} onChange={setTitle} />
    <PeekClose />
  </PeekHeader>
  <PeekBody>…</PeekBody>
</Peek>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<Peek defaultOpen={false}><PeekHeader><PeekTitle>Draft</PeekTitle><PeekDescription>Inspect this draft.</PeekDescription></PeekHeader><PeekBody>Ready for review.</PeekBody><PeekFooter><PeekClose>Close</PeekClose></PeekFooter></Peek>