# Overview
URL: /docs/web/components

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](/docs/web/components/avatar-select) | Avatar Select component with multiple variants and sizes. |
| [Avatar Thumbnail](/docs/web/components/avatar-thumbnail) | Avatar Thumbnail component with multiple variants and sizes. |
| [Awesome Card](/docs/web/components/awesome-card) | A card with a hatched-stripe header and an inset content area, perfect for displaying stats and metrics. |
| [Confirmation Button](/docs/web/components/confirmation-button) | Confirmation Button component with multiple variants and sizes. |
| [Create Record Dialog](/docs/web/components/create-record-dialog) | Create Record Dialog component with multiple variants and sizes. |
| [Data Grid View Select](/docs/web/components/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](/docs/web/components/date-time-picker) | Date Time Picker component with multiple variants and sizes. |
| [Date Time Range Picker](/docs/web/components/date-time-range-picker) | Date Time Range Picker component with multiple variants and sizes. |
| [Day Picker](/docs/web/components/day-picker) | Day Picker component with multiple variants and sizes. |
| [Delete Confirm Dialog](/docs/web/components/delete-confirm-dialog) | Delete Confirm Dialog component with multiple variants and sizes. |
| [Docyrus Data Source Picker](/docs/web/components/docyrus-data-source-picker) | Docyrus Data Source Picker component with multiple variants and sizes. |
| [Duration Select](/docs/web/components/duration-select) | Duration Select component with multiple variants and sizes. |
| [Editable Record Detail](/docs/web/components/editable-record-detail) | Inline record editing with change tracking, validation, hidden fields, and a floating action bar. |
| [Editable Value](/docs/web/components/editable-value) | Inline editable field with display/edit mode switching, popover auto-open, and change tracking. |
| [Instant Message Composer](/docs/web/components/instant-message-composer) | Composer for SMS and WhatsApp with channel switching, recipient chips, attachments, and SMS character counting. |
| [Json Schema Form](/docs/web/components/json-schema-form) | Json Schema Form component with multiple variants and sizes. |
| [Kanban](/docs/web/components/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](/docs/web/components/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](/docs/web/components/morph-popover) | Morph Popover component with multiple variants and sizes. |
| [Notifications Panel](/docs/web/components/notifications-panel) | Notifications Panel component with multiple variants and sizes. |
| [Place Autocomplete](/docs/web/components/place-autocomplete) | Place Autocomplete component with multiple variants and sizes. |
| [Radio Group](/docs/web/components/radio-group) | Radio Group component with multiple variants and sizes. |
| [Schema Repeater](/docs/web/components/schema-repeater) | Schema Repeater component with multiple variants and sizes. |
| [Search Input](/docs/web/components/search-input) | Search Input component with multiple variants and sizes. |
| [Simple Markdown Editor](/docs/web/components/simple-markdown-editor) | Simple Markdown Editor component with multiple variants and sizes. |
| [Timeline](/docs/web/components/timeline) | Vertical timeline with status indicators, alternate layout, animated entrance, and custom content slots. |
| [Tree Select](/docs/web/components/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](/docs/web/components/tree-table) | Tree Table component with multiple variants and sizes. |
| [Tree View](/docs/web/components/tree-view) | Tree View component with multiple variants and sizes. |
| [Adaptive Card](/docs/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. |
| [Adaptive Card Designer](/docs/web/components/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](/docs/web/components/awesome-dialog) | Awesome Dialog component. |
| [Awesome Stats](/docs/web/components/awesome-stats) | Data-driven metric cards with grid, flex, and animated tabs layouts. |
| [Calendar](/docs/web/components/calendar) | Calendar component. |
| [Comments Panel](/docs/web/components/comments-panel) | Comments Panel component. |
| [Contact Activity Panel](/docs/web/components/contact-activity-panel) | A presentational record-activity timeline. Pair it with useDocyrusContactActivity to wire it to the Docyrus backend. |
| [Contact Channels Field](/docs/web/components/contact-channels-field) | A backend-agnostic, fully controlled editor for a record's contact channels, their consent cache and validation status. |
| [Data Gallery](/docs/web/components/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](/docs/web/components/data-grid) | A virtualized, editable spreadsheet-like data grid with sorting, filtering, grouping, cell selection, and keyboard navigation. |
| [Data Import Wizard](/docs/web/components/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](/docs/web/components/data-table) | A lightweight, read-only TanStack table for Docyrus data sources with value renderers, row selection, grouping, and optional pagination. |
| [Data Table Filter](/docs/web/components/data-table-filter) | A composable filter bar for data tables with text, number, date, option, and multi-option column types. |
| [Data Table Side Filters](/docs/web/components/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](/docs/web/components/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](/docs/web/components/editor-agent) | Editor Agent component. |
| [Email Composer](/docs/web/components/email-composer) | Rich text email composer with sender-account picker, formatting toolbar, recipients, attachments, and i18n support. |
| [Email Template Editor](/docs/web/components/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](/docs/web/components/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](/docs/web/components/enum-option-editor) | Enum Option Editor component. |
| [File Attachment Panel](/docs/web/components/file-attachment-panel) | File Attachment Panel component. |
| [Form Builder](/docs/web/components/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](/docs/web/components/form-fields) | Dynamic form field system powered by TanStack Form. 49 field types with automatic dispatch via DynamicFormField. |
| [Gantt](/docs/web/components/gantt) | A Gantt chart component with drag-and-drop task scheduling, timeline zoom, custom markers, and sidebar navigation. |
| [Handlebars Editor](/docs/web/components/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](/docs/web/components/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](/docs/web/components/image-editor) | An image editor with crop, brightness, saturation, contrast, and hue adjustments, supporting rectangle and circle stencils with zoom controls. |
| [Json Schema Designer](/docs/web/components/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](/docs/web/components/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](/docs/web/components/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](/docs/web/components/mega-select) | Mega Select component. |
| [Notification Stack](/docs/web/components/notification-stack) | A stacked notification card system with swipe-to-dismiss gestures, auto-pagination, action buttons, and animated transitions. |
| [Pivot Calendar](/docs/web/components/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](/docs/web/components/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](/docs/web/components/pivot-grid) | A standalone pivot grid with 3-level row and column hierarchies, subtotals, grand totals, drilldown, pinning, resizing, and export. |
| [Pricing Engine Panel](/docs/web/components/pricing-engine-panel) | Pricing Engine Panel component. |
| [Query Builder](/docs/web/components/query-builder) | Query Builder component. |
| [Record Activity Panel](/docs/web/components/record-activity-panel) | Record Activity Panel component. |
| [Record Delete Confirm Dialog](/docs/web/components/record-delete-confirm-dialog) | Record Delete Confirm Dialog component. |
| [Record Sharing](/docs/web/components/record-sharing) | Record Sharing component. |
| [Resource Scheduler Panel](/docs/web/components/resource-scheduler-panel) | Resource Scheduler Panel component. |
| [Stepper](/docs/web/components/stepper) | A multi-step progress indicator with 6 visual variants, horizontal/vertical orientation, animated transitions, and customizable step icons. |
| [Team Chat Channel](/docs/web/components/team-chat-channel) | Team Chat Channel component. |
| [Time Slot Scheduler](/docs/web/components/time-slot-scheduler) | Time Slot Scheduler component. |
| [Value Renderers](/docs/web/components/value-renderers) | Read-only value display system for table cells, detail views, and kanban cards. 44 renderer types with automatic dispatch via DynamicValue. |