FocusView

Stripe FocusView

One task started from somewhere else — “Rotate credentials” on a record, a quick create from a list. A panel slides in from the right over a dimmed page (200ms in, 150ms out), 30rem or 48rem wide and full width on phones, with the title at the top, the body scrolling and a footer with a secondary action on the left and one primary on the right. While there are unsaved changes, every way of closing asks first.

pnpm add @zikzuk/ui

import { FocusView, useFocusView, DISCARD_MESSAGES } from "@zikzuk/ui";

Rotate credentials

Type something, then press Esc or Cancel.

When to use

A short task launched from a record page or a list, after which the person returns where they were.
Pass confirmCloseMessages only while there are unsaved changes.

Not for

A record's own page — every record gets a page.
A chain of panels: one at a time.

Props

Prop	Type	Description
shown	boolean	Whether it is open. Without it the view manages its own, starting open.
setShown	(shown: boolean) => void	Called with false when someone closes it (after any confirmation).
title	string	The task.
eyebrow	ReactNode	A small grey line above the title: where it was started from.
description	ReactNode	One line under the title.
children	ReactNode	The body; it scrolls.
primaryAction	ReactElement	The one primary button, right of the footer.
secondaryAction	ReactElement	A secondary button, left of the footer.
cancelLabel	string	Without secondaryAction: a built-in outline Cancel that closes through the confirmation.
footerContent	ReactNode	Beside the actions: a status line.
size	"small" \| "large" Default `"small"`	30rem or 48rem; always full width on phones.
confirmCloseMessages	ConfirmCloseMessages	Ask before closing — DISCARD_MESSAGES or your own words.
className	string	Extra classes on the outer element.