Action modals

Open each example as a real dialog

These examples now use real modal behaviour with focus trapping, Escape close, and an overlay. Open one to inspect the composition rather than treating four permanently open cards as if they were dialogs.

Knowledge attach

Tabbed source picker with search, subtabs, and attachment selection.

Live: search, row selection, and close. Static preview: source tabs, scope tabs, paging, filter, and final attach.

Cloud empty state

Connection prompt shown when a source exists conceptually but has no live link yet.

Live: dialog and close. Static preview: the fixed source tab and connect cloud.

Update project

Editable project settings surface with knowledge attachments and save actions.

Live: project fields and close. Static preview: asset, clear, add, cancel, and save actions.

Upload documents

Document intake flow with file list, removal, and clear-all actions.

Live: file selection, drop, removal, clear, and close. Static preview: source tabs and final add documents.

Included components

This page is the canonical destination for these components. All ship in the single Kansho pack.

Action modal

components/action-modals/action-modal.tsx

Cloud empty state modal

components/action-modals/cloud-empty-state-modal.tsx

Document glyph

components/action-modals/document-glyph.tsx

File icon

components/action-modals/file-icon.tsx

Knowledge attach modal

components/action-modals/knowledge-attach-modal.tsx

Tabs bar

components/action-modals/tabs-bar.tsx

Update project modal

components/action-modals/update-project-modal.tsx

Upload documents modal

components/action-modals/upload-documents-modal.tsx

Component documentation

Action modal

components/action-modals/action-modal.tsx

Purpose

Provides the shared focus-trapped dialog, scrolling body, and optional sticky footer used by action-modal compositions.

Appropriate use

Use as the modal frame when content needs one accessible title and host-controlled close behavior.

Example

components/action-modals/action-modal.tsx has a representative live example in the "Knowledge attach" section on /components/action-modals.

States

Supports controlled open or closed state, close notification, caller content, independently scrollable body, and sticky or ordinary footer.

API and props

ActionModal accepts open, onClose, title, children, className, and native div props; ActionModalBody and ActionModalFooter accept children and div props, with sticky on the footer.

Dependencies

Direct imports are React, Radix Dialog, and cn.

Accessibility

Radix provides dialog role, modal focus trapping, Escape handling, overlay dismissal, and focus restoration; the title is available to assistive technology.

Limitations

It defaults open for composed specimens, has no visible description or close control of its own, and callers must supply actions and close affordances.

Source

Source: components/action-modals/action-modal.tsx.

Full pack

components/action-modals/action-modal.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.

Cloud empty state modal

components/action-modals/cloud-empty-state-modal.tsx

Purpose

Shows a cloud-connection empty state inside the shared action modal.

Appropriate use

Use when a cloud source is understood but no connection exists yet.

Example

components/action-modals/cloud-empty-state-modal.tsx has a representative live example in the "Cloud empty state" section on /components/action-modals.

States

Supports open or closed state, controlled close, one cloud tab, and the fixed empty-state presentation.

API and props

CloudEmptyStateModal accepts open, className, and onClose.

Dependencies

Direct imports are React, Lucide icons, ActionModal, TabsBar, Button, and cn.

Accessibility

It inherits ActionModal focus behavior and TabsBar keyboard semantics; the visible connection action currently has no callback.

Limitations

The content and Ruli reference are fixed, and Connect cloud is a static preview rather than a working integration action.

Source

Source: components/action-modals/cloud-empty-state-modal.tsx.

Full pack

components/action-modals/cloud-empty-state-modal.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.

Document glyph

components/action-modals/document-glyph.tsx

Purpose

Displays a stack, people, lock, or document glyph for knowledge rows and project assets.

Appropriate use

Use only as a supplemental icon beside a visible document or asset label.

Example

components/action-modals/document-glyph.tsx has a representative live example in the "Knowledge attach" section on /components/action-modals.

States

Kinds are stack, people, lock, and doc; className can adjust presentation.

API and props

DocumentGlyph accepts kind and className.

Dependencies

Direct imports are React, Lucide icons, and cn.

Accessibility

The owning rows provide the accessible document labels; this component does not provide its own accessible name.

Limitations

It is presentational, has fixed icon mapping, and must not be used alone to communicate document type.

Source

Source: components/action-modals/document-glyph.tsx.

Full pack

components/action-modals/document-glyph.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.

File icon

components/action-modals/file-icon.tsx

Purpose

Displays a neutral file-shaped badge with a visible PDF, XLS, CSV, or DOC label.

Appropriate use

Use beside a filename where the extension label supplements the visible name.

Example

components/action-modals/file-icon.tsx has a representative live example in the "Upload documents" section on /components/action-modals.

States

Kinds are PDF, XLS, CSV, and DOC; sizes are sm and md.

API and props

FileIcon accepts kind, size, and className.

Dependencies

Direct imports are React and cn.

Accessibility

The decorative file outline is hidden while the extension remains visible text in normal reading order.

Limitations

All kinds intentionally share one colour and the component does not infer a kind from filenames or include a full filename label.

Source

Source: components/action-modals/file-icon.tsx.

Full pack

components/action-modals/file-icon.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.

Knowledge attach modal

components/action-modals/knowledge-attach-modal.tsx

Purpose

Provides a searchable, scoped knowledge picker with selectable rows inside the shared action modal.

Appropriate use

Use for choosing existing knowledge sources when the host can consume the selected result.

Example

components/action-modals/knowledge-attach-modal.tsx has a representative live example in the "Knowledge attach" section on /components/action-modals.

States

Supports open/closed dialog, source tab, custom subtabs, search/no-results, enabled or muted rows, multi-selection, and disabled/enabled Attach appearance.

API and props

KnowledgeAttachModal accepts open, className, onClose, rows, subtabs, and breadcrumb; rows contain kind, label, and muted.

Dependencies

Direct imports are React, Lucide icons, ActionModal, DocumentGlyph, TabsBar, Button, Checkbox, IconButton, SearchInput, and cn.

Accessibility

Rows use labelled checkboxes with disabled state, search and its result panel are named, tabs support keyboard navigation, and the dialog traps focus.

Limitations

Default rows are demo content; source and scope tabs only change active styling, selection is internal, and pager, Filter, and Attach do not perform host actions.

Source

Source: components/action-modals/knowledge-attach-modal.tsx.

Full pack

components/action-modals/knowledge-attach-modal.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.

Tabs bar

components/action-modals/tabs-bar.tsx

Purpose

Provides source tabs, optional search/close actions, and a simpler scoped subtab group.

Appropriate use

Use at the top of action modals when each tab has a matching labelled panel.

Example

components/action-modals/tabs-bar.tsx has a representative live example in the "Knowledge attach" section on /components/action-modals.

States

Source tabs are laptop, cloud, and knowledge or a supplied subset; active value is caller-controlled, icon actions are optional, and subtabs accept any string ids.

API and props

TabsBar accepts active, onChange, onClose, onSearchClick, tabs, and className; TabsBarSubtabs accepts active, tabs, onChange, aria-label, and className.

Dependencies

Direct imports are React, Lucide icons, IconButton, and cn.

Accessibility

The source bar uses tablist/tab semantics, roving focus, Arrow/Home/End keys, selected state, and explicit panel ids; subtabs are a labelled group with current state.

Limitations

TabsBar does not render or change panel content itself; consumers must render meaningful matching panels and preserve each labelledby relationship.

Source

Source: components/action-modals/tabs-bar.tsx.

Full pack

components/action-modals/tabs-bar.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.

Update project modal

components/action-modals/update-project-modal.tsx

Purpose

Shows project name, instructions, and knowledge-asset preview controls in an action modal.

Appropriate use

Use as a project-settings specimen only after the host replaces or wires its fixed knowledge and save actions.

Example

components/action-modals/update-project-modal.tsx has a representative live example in the "Update project" section on /components/action-modals.

States

Supports open/closed dialog, local text-field edits, fixed mixed asset cells, and optional close control.

API and props

UpdateProjectModal accepts open, className, and onClose.

Dependencies

Direct imports are React, Lucide icons, ActionModal, FileIcon, DocumentGlyph, Field, Button, IconButton, Input, Textarea, Tooltip, and cn.

Accessibility

Project fields have visible labels, the close control is named, asset buttons have names, and the dialog inherits focus trapping.

Limitations

Initial values and assets are fixed; knowledge, asset, Cancel, and Save controls have no persistence callbacks and are static preview chrome.

Source

Source: components/action-modals/update-project-modal.tsx.

Full pack

components/action-modals/update-project-modal.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.

Upload documents modal

components/action-modals/upload-documents-modal.tsx

Purpose

Provides a file-input and drag/drop document queue inside the shared action modal.

Appropriate use

Use for local document selection when the host can take over final upload submission.

Example

components/action-modals/upload-documents-modal.tsx has a representative live example in the "Upload documents" section on /components/action-modals.

States

Supports open/closed dialog, laptop/cloud/knowledge tabs, idle or dragging dropzone, empty or populated queue, accepted document extensions, and removable files.

API and props

UploadDocumentsModal accepts open, className, and onClose; selected file queue and file-kind inference are internal.

Dependencies

Direct imports are React, Lucide icons, ActionModal, FileIcon, TabsBar, Button, IconButton, and cn.

Accessibility

The hidden file input is labelled, the dropzone is a keyboard button, remove controls include filenames, tabs have keyboard behavior, and the dialog traps focus.

Limitations

It does not upload files, swap content for source tabs, validate file contents, expose the queue, report progress, or wire the final Add documents action.

Source

Source: components/action-modals/upload-documents-modal.tsx.

Full pack

components/action-modals/upload-documents-modal.tsx is documented at /components/action-modals and installs only through the single Kansho full pack; no individual component install is offered.