What a destructive action will change, row by row, before it is confirmed.
ImpactPreview lists the consequences of an action (projects reassigned, sign-ins revoked) with severities, named affected records, and loading, error and nothing-affected states. TypeToConfirmModal embeds it.
Installation
npx shadcn@latest add KezLahd/rime/impact-previewAlso installs: base, button, icon, skeleton, spinner.
Usage
import { ImpactPreview } from "@/components/ui";
<ImpactPreview items={[{ id: "a", severity: "destructive", title: "Signed out everywhere" }]} />Examples
Default
Impact preview
This action cannot be undone
Irreversible: Jane Cooper is signed out everywhere
Coming back needs a new invite.
No change: No open projects to reassign
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
ImpactPreview
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Impact preview" | Default "Impact preview". |
| headingLevel | 2 | 3 | 4 | 3 | Level of the small-caps heading. 3 inside a modal (the dialog title is the h2). |
| statement | ReactNode | A compact danger line under the heading, e.g. "This action cannot be undone". TypeToConfirmModal passes its consequencesTitle here. | |
| items | ImpactItem[] | One row per consequence. Omit for a panel of prose only (children); an empty array renders the empty row ("Nothing else is affected"). | |
| children | ReactNode | Plain text under the heading and above the rows: context the rows don't carry. | |
| loading | boolean | false | The consequences are still being worked out on the server. |
| loadingRows | number | 3 | How many skeleton rows stand in while loading. Match the usual count. |
| error | ReactNode | boolean | true for the default message, or the reason. Shown instead of the rows. | |
| onRetry | () => void | Shows a Retry button in the error row. | |
| emptyTitle | ReactNode | "Nothing else is affected" | Title of the row an empty items array renders. |
| affectedLimit | number | 5 | Affected lists longer than this collapse behind "Show N more". Default 5. |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-circle | 50% | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --danger-fill | tokens.css | … |
| --danger-ink | tokens.css | … |
| --danger-solid | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --font-body | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line | tokens.css | … |
| --line-soft | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-lg | tokens.css | … |
| --r-sm | tokens.css | … |
| --r-xs | tokens.css | … |
| --shadow-input | tokens.css | … |
| --shadow-specular | tokens.css | … |
| --success-ink | tokens.css | … |
| --success-solid | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
| --warning-fill | tokens.css | … |
| --warning-ink | tokens.css | … |
| --warning-solid | tokens.css | … |
| --wash-active | tokens.css | … |
Accessibility
- A list with a heading; severities are written out, not only coloured.
Do and don't
Do
- State each row as an outcome: "3 projects are reassigned".
Don't
- Don't hide consequences behind a disclosure.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open impact-preview.md