Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-create-record-dialogRequired Packages(3 packages)
pnpm add radix-ui @types/react @types/react-domUI Primitives(6 components)
npx shadcn@latest add button command dialog dropdown-menu popover switchUsage
import {
CreateRecordDialog
} from "@docyrus/ui/components/create-record-dialog";
<CreateRecordDialog
open
onOpenChange={() => {}}
headerIcon={...}
headerLabel="..."
headerFields={SelectorFieldConfig[]}
subjectPlaceholder="..."
descriptionPlaceholder="..."
descriptionExpanded
footerFields={SelectorFieldConfig[]}
footerToggles={FooterToggleConfig[]}
mentionTriggers={MentionTriggerConfig[]}
onMentionSelect={() => {}}
aiActions={AiAction[]}
enableCreateMore
createMoreResetKeys={string[]}
onSubmit={() => {}}
isPending
saveLabel="..."
cancelLabel="..."
createMoreLabel="..."
addDescriptionLabel="..."
dialogTitle="..."
/>API Reference
| Prop | Type | Default |
|---|---|---|
open | boolean | — |
onOpenChange | (open: boolean) => void | — |
headerIcon | ReactNode | — |
headerLabel | string | — |
headerFields | SelectorFieldConfig[] | — |
subjectPlaceholder | string | — |
descriptionPlaceholder | string | — |
descriptionExpanded | boolean | — |
footerFields | SelectorFieldConfig[] | — |
footerToggles | FooterToggleConfig[] | — |
mentionTriggers | MentionTriggerConfig[] | — |
onMentionSelect | (selection: MentionSelection) => void | — |
aiActions | AiAction[] | — |
enableCreateMore | boolean | — |
createMoreResetKeys | string[] | — |
onSubmit | (data: CreateRecordFormData) => void | Promise<void> | — |
isPending | boolean | — |
saveLabel | string | — |
cancelLabel | string | — |
createMoreLabel | string | — |
addDescriptionLabel | string | — |
dialogTitle | string | — |
className | string | — |
Contact Channels Field
A backend-agnostic, fully controlled editor for a record's contact channels, their consent cache and validation status.
Data Gallery
A standalone, virtualized card gallery view for record lists. Toolbar-driven card design (variant, cover style, density, field bindings) plus full TanStack Table integration for sorting, filtering, grouping, and saved views.