Usage

• Use a side peek to preview a page or record while keeping the list beside it usable.
• Use a center peek when the preview should take focus (modal) but the user stays in context.
• Offer “Open in full page” for long content; peeks are for quick reads and edits.
• Don’t stack peeks; replace the content (Previous / Next) instead.
• Don’t use a peek for confirmations or short forms; use Dialog / ConfirmDialog.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { SidePeek, PeekBody, PeekProperties, PeekProperty, PeekComments, PageHeader, Button } from '@krackedui/motion';

export function PeekExample() {
  const [open, setOpen] = useState(true);

  return (
    <div className="relative h-[640px] bg-n-bg-secondary">
      <Button variant="secondary" onClick={() => setOpen(true)}>Open side peek</Button>
      <SidePeek open={open} width={660} onClose={() => setOpen(false)} onSwitchMode={() => console.log('Switch to center peek')}>
          <PeekBody
            header={<PageHeader size="peek" title="Sidebar rebuild" extraControls={null} />}
            properties={
              <PeekProperties>
                <PeekProperty icon="calendarDate15" label="Due">October 9, 2026</PeekProperty>
                <PeekProperty icon="arrowInCircleDown" label="Priority">High</PeekProperty>
                <PeekProperty icon="checkmarkCircle" label="Status" />
              </PeekProperties>
            }
            comments={<PeekComments />}
          >
            <div className="pl-2 text-n-text-tertiary">Press ‘enter’ to continue with an empty page.</div>
          </PeekBody>
      </SidePeek>
    </div>
  );
}

Examples

Center peek

Peek top bar

Database row in a peek

Use PropertyList for editable database properties.

Composition

<SidePeek>  |  <CenterPeek open onOpenChange>
  <PeekTopBar/>              // built in: Close · Open in full page · (hover) Switch peek mode · Previous / Next · actions
  <PeekBody header properties comments gutter>
    header      → <PageHeader size="peek"/>
    properties  → <PeekProperties> <PeekProperty/> × n </PeekProperties>   (or <PropertyList/> for databases)
    comments    → <PeekComments/>
    children    → page body
  </PeekBody>
</SidePeek>

API Reference

SidePeek

Based on a non-modal <dialog open> (except title). Also takes the PeekTopBar callbacks.

CenterPeek

PeekTopBar

PeekBody

Based on <div> (except title).

PeekProperties

Based on <div>. Table wrapper + "Add a property".

PeekProperty

Based on <div>. Static property row.

PeekComments

Based on <div> (except onSubmit).

Accessibility

• Side peek: a non-modal dialog (aria-modal="false", labelled by label, default "Page preview"). Focus moves into it on open and returns to the opener on close; Escape inside it closes it (onClose). The left-edge resize handle is a "Preview width" slider: ←/↑ widen, →/↓ narrow (20px), Page Up/Down 100px, Home/End jump to minWidth/maxWidth.
• Center peek: Radix Dialog with a visually hidden title; focus is trapped, Escape and the underlay close it, focus returns to the trigger.
• Top bar buttons have labels and titles (Close, Open in full page, Switch peek mode, Previous page, Next page); the hover-only group also appears on focus.
• Comments: the input is labelled by its placeholder, Enter sends; Attach, Mention and Send are labelled buttons.
• Both slide / scale in and out (disabled under reduced motion) and are full-screen on phones.