> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overlays

> Sheet, ActionSheet, Dialog, Modal, confirm dialogs, Menu, Tooltip and Popover.

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

```tsx theme={null}
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>
```

<ParamField path="open" type="boolean" required>Visibility.</ParamField>
<ParamField path="onClose" type="() => void" required>Called on drag-down, scrim tap, Back or Escape.</ParamField>
<ParamField path="title" type="ReactNode">Sheet title.</ParamField>
<ParamField path="grip" type="boolean" default="true">Show the drag handle.</ParamField>
<ParamField path="dragToClose" type="boolean" default="true">Drag down to dismiss.</ParamField>
<ParamField path="expandable" type="boolean" default="true">Drag up to grow toward full height.</ParamField>

## ActionSheet

```tsx theme={null}
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

```tsx theme={null}
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.

## Modal

```tsx theme={null}
import { Modal } from '@cskn/ui';

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

<ParamField path="size" type="'sm' | 'md' | 'lg' | 'xl' | 'full'" default="'md'">Maximum width: 400, 560, 760, 1000 px, or the viewport minus a margin.</ParamField>
<ParamField path="fullScreen" type="boolean">Edge to edge with no margin or radius.</ParamField>
<ParamField path="dismissable" type="boolean" default="true">Scrim tap and Back close it.</ParamField>
<ParamField path="showClose" type="boolean">Show the title row with a close button. Defaults to on when there is a title.</ParamField>

## useConfirm

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

```tsx theme={null}
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`](/concepts/authentication#sign-in-and-sign-out).

```tsx theme={null}
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' }}
/>
```

<ParamField path="returnTo" type="string">Where to return after logout. Defaults to the current origin.</ParamField>
<ParamField path="defaultAllSessions" type="boolean">Start with the box ticked.</ParamField>
<ParamField path="labels" type="object">Text overrides: `title`, `message`, `allSessions`, `allSessionsHint`, `confirm`, `cancel`.</ParamField>
<ParamField path="onConfirm" type="({ url, allSessions }) => void">Handle the navigation yourself. Without it, the dialog navigates to the link.</ParamField>

## Menu

```tsx theme={null}
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?`.

## Tooltip

```tsx theme={null}
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).

## Popover

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.

```tsx theme={null}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.