Stats
Actions
Tags
From f-rha-dialog
Use when the user wants to use, customize, or ask about the Dialog component from the f-rha library. Covers open/close control, title, body content, footer actions, width customization, overlay click and Escape key to close.
How this skill is triggered — by the user, by Claude, or both
Slash command
/f-rha-dialog:dialogThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A modal dialog component. Closes on overlay click or Escape key.
A modal dialog component. Closes on overlay click or Escape key.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls dialog visibility |
onClose | () => void | — | Called when overlay or close button is clicked, or Escape is pressed |
title | string | — | Dialog header title |
children | ReactNode | — | Dialog body content |
footer | ReactNode | — | Dialog footer content (e.g. action buttons) |
width | string | "480px" | Dialog width (any valid CSS value) |
import { Dialog, Button } from "f-rha";
const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Open Dialog</Button>
<Dialog
open={open}
onClose={() => setOpen(false)}
title="Confirm Action"
footer={
<>
<Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
<Button onClick={() => setOpen(false)}>Confirm</Button>
</>
}
>
Are you sure you want to continue?
</Dialog>
npx claudepluginhub dio-chu/f-rha-marketplace --plugin f-rha-dialogProvides a primitive dialog component (Dialog) from the SmartHR design system for custom dialogs not covered by ActionDialog, MessageDialog, ModelessDialog, FormDialog, or StepFormDialog. Includes DialogWrapper, DialogTrigger, DialogContent, DialogCloser, and Dialog subcomponents with size, focus, accessibility, and overlay props.
Build accessible modal dialogs with focus trapping, escape dismissal, background inertness, and screen reader announcements. Covers native <dialog> and custom implementations.
Provides native HTML dialog patterns for Rails with Turbo and Stimulus to build accessible modals, confirmations, alerts, and overlay UIs.