Dialog / Modal
Radix-backed dialog window for confirmations, short forms, destructive decisions, scrollable content, and locked flows.
Included in the single kansho full pack. Components are not offered as separate installs.
Sizes
Component documentation
Modal
components/surfaces/modal.tsxPurpose
Provides centred modal and edge-sheet dialog compositions with shared dismissal behaviour.
Appropriate use
Use Modal for focused blocking tasks and Sheet for supplementary workflows that benefit from retaining page context.
Example
components/surfaces/modal.tsx has a representative live example in the "Sizes" section on /components/modal.
States
Supports controlled open or closed state, sm, md, and lg modal sizes, left or right sheets, optional footer, hidden close control, and dismissible or locked behaviour.
API and props
Modal accepts open, onClose, ariaLabel, title, description, size, children, footer, hideClose, dismissible, and className; Sheet adds side and width with the same content contract.
Dependencies
React, Radix Dialog, Lucide icons, and the Kansho cn utility.
Accessibility
Radix supplies modal focus management and Escape handling; visible or screen-reader titles and descriptions label the dialog, and the close control has an accessible name.
Limitations
Open state and action completion are caller-owned; hiding the close control or disabling dismissal requires another clear path to finish the task.
Source
Source: components/surfaces/modal.tsx.
Full pack
components/surfaces/modal.tsx is documented at /components/modal and installs only through the single Kansho full pack; no individual component install is offered.