Overlays

Every overlay renders into a root portal, locks page scrolling, traps TV remote focus inside itself, and closes on the remote’s Back button or Escape.

Component	Shape	Typical use
`Sheet`	Slides up from the bottom	Filters, forms, details on mobile
`ActionSheet`	Sheet with a list of actions	”Share / Edit / Delete”
`Dialog`	Small, centered	Short messages and decisions
`Modal`	Centered, sizable up to full screen	Media, wide content, lightboxes
`useConfirm`	Imperative dialog	`await confirm(…)`
`Menu`, `Tooltip`, `Popover`	Anchored to an element	Desktop menus and hints

Sheet

import { Sheet, Button } from '@cskn/ui';

const [open, setOpen] = useState(false);

<Sheet open={open} onClose={() => setOpen(false)} title="Filters">
  <FilterForm />
  <Button block onClick={() => setOpen(false)}>Apply</Button>
</Sheet>

boolean

required

Visibility.

() => void

required

Called on drag-down, scrim tap, Back or Escape.

ReactNode

Sheet title.

boolean

default:"true"

Show the drag handle.

boolean

default:"true"

Drag down to dismiss.

boolean

default:"true"

Drag up to grow toward full height.

ActionSheet

import { ActionSheet } from '@cskn/ui';

<ActionSheet
  open={open}
  onClose={close}
  title="Book"
  actions={[
    { label: 'Share', icon: 'share', onPress: share },
    { label: 'Delete', icon: 'trash', destructive: true, onPress: remove },
  ]}
/>

Each action has label, icon?, destructive? and onPress. cancelLabel sets the cancel row’s text (default 'Cancel'); null hides it.

Dialog

import { Dialog } from '@cskn/ui';

<Dialog open={open} onClose={close} title="Rename">
  <Input value={name} onChange={(e) => setName(e.target.value)} />
</Dialog>

dismissable (default true) controls whether a scrim tap or Back closes it.

import { Modal } from '@cskn/ui';

<Modal open={open} onClose={close} size="xl" title="Trailer">
  <div style={{ aspectRatio: '16 / 9' }}><iframe src={trailerUrl} /></div>
</Modal>

'sm' | 'md' | 'lg' | 'xl' | 'full'

default:"'md'"

Maximum width: 400, 560, 760, 1000 px, or the viewport minus a margin.

boolean

Edge to edge with no margin or radius.

boolean

default:"true"

Scrim tap and Back close it.

boolean

Show the title row with a close button. Defaults to on when there is a title.

useConfirm

Imperative confirm and alert dialogs that return promises. Available anywhere inside UIProvider.

import { useConfirm } from '@cskn/ui';

const { confirm, alert } = useConfirm();

const ok = await confirm({ title: 'Delete this book?', danger: true, confirmLabel: 'Delete' });
if (ok) await remove();

await alert({ title: 'Saved', message: 'Your changes are live.' });

confirm takes title?, message?, confirmLabel?, cancelLabel?, danger? and resolves true or false. alert takes title?, message?, okLabel?.

LogoutConfirm

A sign-out confirmation with a checkbox to end every session on this device. When ticked, the logout link carries session=all. The link always comes from the SDK’s logoutUrl.

import { LogoutConfirm, Button } from '@cskn/ui';

const [asking, setAsking] = useState(false);

<Button variant="ghost" onClick={() => setAsking(true)}>Log out</Button>
<LogoutConfirm
  open={asking}
  onClose={() => setAsking(false)}
  labels={{ title: 'Log out?', confirm: 'Log out', cancel: 'Stay' }}
/>

string

Where to return after logout. Defaults to the current origin.

boolean

Start with the box ticked.

object

Text overrides: title, message, allSessions, allSessionsHint, confirm, cancel.

({ url, allSessions }) => void

Handle the navigation yourself. Without it, the dialog navigates to the link.

import { Menu, Button } from '@cskn/ui';

<Menu
  trigger={<Button variant="outline">Actions</Button>}
  items={[
    { label: 'Share', icon: 'share', onClick: share },
    { separator: true },
    { label: 'Delete', icon: 'trash', destructive: true, onClick: remove },
  ]}
/>

Items have label, icon?, onClick, destructive? and disabled?, or are { separator: true }. Also takes placement? and matchWidth?.

import { Tooltip, Pressable, Icon } from '@cskn/ui';

<Tooltip label="Add to favorites">
  <Pressable aria-label="Favorite"><Icon name="heart" /></Pressable>
</Tooltip>

Shows on hover and on focus. Props: label, placement?, delay? (default 350 ms). The low-level anchored overlay that Menu and Tooltip are built on. It flips and clamps to stay on screen, and closes on an outside click, Back or Escape.

import { Popover } from '@cskn/ui';

const anchor = useRef<HTMLButtonElement>(null);

<button ref={anchor} onClick={() => setOpen(true)}>Details</button>
<Popover open={open} onClose={() => setOpen(false)} anchorRef={anchor} placement="bottom-end">
  <DetailsPanel />
</Popover>

Props: open, onClose, anchorRef, placement? (default bottom-start), gap? (default 6), matchWidth?. computePosition is exported for custom anchored UI.

Overview

Components

Platform

Profile integration

Sheet

ActionSheet

Dialog

useConfirm

LogoutConfirm

Menu

Tooltip

Popover

​Sheet

​ActionSheet

​Dialog

​Modal

​useConfirm

​LogoutConfirm

​Menu

​Tooltip

​Popover

Sheet

ActionSheet

Dialog

Modal

useConfirm

LogoutConfirm

Menu

Tooltip

Popover