SessionPeek

A glance at a session’s screen next to its row, without opening it. Pick it for lists of sessions where switching costs a context change.

SessionPeek

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, SessionPeek

Dark theme, SessionPeek

High contrast theme, SessionPeek

UsageLink to the section Usage

tsx

import { SessionPeek } from '@skribly/ui/agents'

tsx

<SessionPeek label={t('screenOf', { name })} title={name} lines={lines} state="working" stateLabel={t('state.working')}>
  <Button>{name}</Button>
</SessionPeek>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Built on React Aria’s PreviewTrigger: it opens after a short hover, on keyboard focus or on a long press, the pointer can move onto it without it closing, and Escape closes it.
Tab from the trigger moves into the screen, a named group a screen reader can read line by line.
It never takes the place of opening the session, which the trigger itself does.

This demo runs through axe in all three themes on every test run. See what the tests check.