Components
Overview
General-purpose UI components built with React, TypeScript, Tailwind CSS v4, and CVA variants.
Browse all available Docyrus UI components.
Available Components
| Component | Description |
|---|---|
| Avatar Select | Avatar Select component with multiple variants and sizes. |
| Avatar Thumbnail | Avatar Thumbnail component with multiple variants and sizes. |
| Awesome Card | A card with a hatched-stripe header and an inset content area, perfect for displaying stats and metrics. |
| Confirmation Button | Confirmation Button component with multiple variants and sizes. |
| Create Record Dialog | Create Record Dialog component with multiple variants and sizes. |
| Data Grid View Select | A view selector with integrated view editor for DataGrid. Supports dropdown, horizontal-tabs, and vertical-tabs variants with full CRUD operations on saved views. |
| Date Time Picker | Date Time Picker component with multiple variants and sizes. |
| Date Time Range Picker | Date Time Range Picker component with multiple variants and sizes. |
| Day Picker | Day Picker component with multiple variants and sizes. |
| Delete Confirm Dialog | Delete Confirm Dialog component with multiple variants and sizes. |
| Docyrus Data Source Picker | Docyrus Data Source Picker component with multiple variants and sizes. |
| Duration Select | Duration Select component with multiple variants and sizes. |
| Editable Record Detail | Inline record editing with change tracking, validation, hidden fields, and a floating action bar. |
| Editable Value | Inline editable field with display/edit mode switching, popover auto-open, and change tracking. |
| Instant Message Composer | Composer for SMS and WhatsApp with channel switching, recipient chips, attachments, and SMS character counting. |
| Json Schema Form | Json Schema Form component with multiple variants and sizes. |
| Kanban | A drag-and-drop kanban board with sortable columns and items, column reordering, overlay previews, and final drop zones for archiving or completing tasks. |
| Map | Interactive map component built on Leaflet with SSR-safe lazy loading, theme-aware tiles, marker clustering, drawing tools, custom controls, and geolocation. |
| Morph Popover | Morph Popover component with multiple variants and sizes. |
| Notifications Panel | Notifications Panel component with multiple variants and sizes. |
| Place Autocomplete | Place Autocomplete component with multiple variants and sizes. |
| Radio Group | Radio Group component with multiple variants and sizes. |
| Schema Repeater | Schema Repeater component with multiple variants and sizes. |
| Search Input | Search Input component with multiple variants and sizes. |
| Simple Markdown Editor | Simple Markdown Editor component with multiple variants and sizes. |
| Timeline | Vertical timeline with status indicators, alternate layout, animated entrance, and custom content slots. |
| Tree Select | A select dropdown backed by a tree. Single mode renders like Select; multi mode renders like Tag Select. Hierarchical search, expand-all and parent-cascade checking come from the embedded Tree View. |
| Tree Table | Tree Table component with multiple variants and sizes. |
| Tree View | Tree View component with multiple variants and sizes. |
| Adaptive Card | Renderer for Microsoft's Adaptive Cards 1.5 schema. Surfaces LLM-generated and Microsoft Teams payloads as native Docyrus UI with stateful inputs, validation, nested ShowCards, and action dispatch. |
| Adaptive Card Designer | Visual drag-and-drop designer for Microsoft Adaptive Cards 1.5 / 1.6 payloads. Three-pane editor (toolbox · canvas · structure / properties) with paired JSON editors, live preview, undo / redo, and theme / width controls — backed by the in-repo Adaptive Card renderer. |
| Awesome Dialog | Awesome Dialog component. |
| Awesome Stats | Data-driven metric cards with grid, flex, and animated tabs layouts. |
| Calendar | Calendar component. |
| Comments Panel | Comments Panel component. |
| Contact Activity Panel | A presentational record-activity timeline. Pair it with useDocyrusContactActivity to wire it to the Docyrus backend. |
| 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. |
| Data Grid | A virtualized, editable spreadsheet-like data grid with sorting, filtering, grouping, cell selection, and keyboard navigation. |
| Data Import Wizard | Multi-step modal wizard that turns an Excel/CSV upload into Docyrus data source records — drag-drop, auto-mapped column→field assignment, per-type config, value-renderer preview, and a result summary. |
| Data Table | A lightweight, read-only TanStack table for Docyrus data sources with value renderers, row selection, grouping, and optional pagination. |
| Data Table Filter | A composable filter bar for data tables with text, number, date, option, and multi-option column types. |
| Data Table Side Filters | An always-visible side filter panel for e-commerce-style listings — covers every Docyrus field type and emits the same RuleGroupType JSON as the Query Builder. |
| Dummy Data Generator | Multi-step modal wizard that generates Docyrus-compatible sample records — per-field strategies (text/number/date/enum/relation), value-renderer preview, and an opt-in batch save to the data source. |
| Editor Agent | Editor Agent component. |
| Email Composer | Rich text email composer with sender-account picker, formatting toolbar, recipients, attachments, and i18n support. |
| Email Template Editor | A standalone, beehiiv-style email template editor built on PlateJS. A rich block canvas with a "+"/slash insert palette and merge-tag chips, a full Theme panel (Basic + Advanced) that live-styles every part of the email via CSS variables, email-safe HTML serialization, and a multi-provider preview simulator (Gmail / Outlook / Apple Mail / Mobile / Dark). |
| Emoji Picker | A searchable, category-tabbed emoji picker with skin-tone selection and recently-used memory, built on the emoji-mart dataset. |
| Enum Option Editor | Enum Option Editor component. |
| File Attachment Panel | File Attachment Panel component. |
| Form Builder | A drag-and-drop form designer with a field palette, canvas, properties panel, live preview and code export for TanStack Form, React Hook Form, Zod and raw useState. |
| Form Fields | Dynamic form field system powered by TanStack Form. 49 field types with automatic dispatch via DynamicFormField. |
| Gantt | A Gantt chart component with drag-and-drop task scheduling, timeline zoom, custom markers, and sidebar navigation. |
| Handlebars Editor | A three-pane workbench for writing and rendering Handlebars templates — a JSON input pane, a template editor with IntelliSense, and a live output pane with HTML preview. |
| Html Template Editor | WYSIWYG document editor for authoring Handlebars-aware HTML templates (quotes, invoices, reports). Word-style A4 page surface, four tabs (Visual / Code / Data / Preview), variable & helper chips, slash-style triggers, and a data-driven Table dialog where users discover JSON paths, configure columns, and write free-form sum / aggregate expressions per row. |
| Image Editor | An image editor with crop, brightness, saturation, contrast, and hue adjustments, supporting rectangle and circle stencils with zoom controls. |
| Json Schema Designer | A row-based JSON Schema designer ported from extend-hq's schema-builder. Edit property name, type, description and enum values inline; add children directly from each container; preview the live JSON Schema in the side tab. |
| Jsonata Editor | A three-pane workbench for writing and evaluating JSONata expressions — a JSON input pane, an expression editor with IntelliSense, and a live result pane. |
| Log Activity Form | A presentational multi-tab "log activity" composer — comment, email, call, meeting, task, and status — with every tab rendered inline, wired to Docyrus via the useDocyrusLogActivity hook. |
| Mega Select | Mega Select component. |
| Notification Stack | A stacked notification card system with swipe-to-dismiss gestures, auto-pagination, action buttons, and animated transitions. |
| Pivot Calendar | Calendar component that pivots time-based statistics across four layouts — full month, days of a week, days of a month, or months of a year — with grouping, tooltips, and local or remote aggregation. |
| Pivot Filter | Horizontal or vertical strip of count-tagged pills used to quickly slice a list by one dimension — status, user, date bucket, or any other categorical value. |
| Pivot Grid | A standalone pivot grid with 3-level row and column hierarchies, subtotals, grand totals, drilldown, pinning, resizing, and export. |
| Pricing Engine Panel | Pricing Engine Panel component. |
| Query Builder | Query Builder component. |
| Record Activity Panel | Record Activity Panel component. |
| Record Delete Confirm Dialog | Record Delete Confirm Dialog component. |
| Record Sharing | Record Sharing component. |
| Resource Scheduler Panel | Resource Scheduler Panel component. |
| Stepper | A multi-step progress indicator with 6 visual variants, horizontal/vertical orientation, animated transitions, and customizable step icons. |
| Team Chat Channel | Team Chat Channel component. |
| Time Slot Scheduler | Time Slot Scheduler component. |
| Value Renderers | Read-only value display system for table cells, detail views, and kanban cards. 44 renderer types with automatic dispatch via DynamicValue. |
Distributions
Component distributions and core libraries that power Docyrus UI web components.
Adaptive Card
Renderer for Microsoft's Adaptive Cards 1.5 schema. Surfaces LLM-generated and Microsoft Teams payloads as native Docyrus UI with stateful inputs, validation, nested ShowCards, and action dispatch.