@docyrus/ui is the Docyrus web component library (React 19 + Tailwind v4, distributed via a self-hosted shadcn registry). This skill is the master index: every web component and hook, with a one-line description, its import path, and a link to its llms.txt documentation page.
How to use this skill
- Find the component in the categorized tables below (or the hooks catalog).
- Fetch its
llms.txtpage (the link in each row) withWebFetch(orcurl) before writing code. The catalog descriptions are intentionally short; thellms.txtpage is the source of truth for props, types, variants, sizes, usage snippets, and dependencies. Never guess a component's API — read the page. - Install it into a consuming project with the Docyrus CLI:
- Component:
docyrus add @docyrus/ui-<slug>(e.g.docyrus add @docyrus/ui-data-grid) - Hook:
docyrus add @docyrus/hooks-<slug>(e.g.docyrus add @docyrus/hooks-use-docyrus-data-grid)
- Component:
- Import from the package export:
- Component:
import { DataGrid } from '@docyrus/ui/components/data-grid'; - Hook:
import { useDocyrusDataGrid } from '@docyrus/ui/library/hooks/use-docyrus-data-grid'; - Primitive:
import { Button } from '@docyrus/ui/primitives/ui/button';
- Component:
Docs base URL is
https://ui.docy.app. The per-page LLM doc lives at…/docs/web/<section>/<slug>/llms.txt; the human page drops the/llms.txtsuffix.
Master documentation indexes
Fetch these when you need the full library at once instead of a single component:
- All web components & hooks (index): https://ui.docy.app/llms-web.txt
- All web components & hooks (full text, concatenated): https://ui.docy.app/llms-full-web.txt
- Everything (web + native, index): https://ui.docy.app/llms.txt
- Everything (web + native, full text): https://ui.docy.app/llms-full.txt
Connection model
- Standalone components work with local props/state — no backend needed.
- Docyrus-connected components (the "Docyrus" section + most
useDocyrus*hooks) need an authenticated@docyrus/api-client. The pattern is: pick the presentational component, then wire it with itsuseDocyrus*hook, which fetches data and returns ready-to-spread props. - For tenant-aware date/number formatting across grids, calendars, filters, and value renderers, mount
<DocyrusTenantProvider client={...} enabled={authReady} userTimezone={tz}>once near the app root (seeuseDocyrusTenant).
When to also load another skill
- Full data-grid / record-list pages (saved views, toolbar, filtering, paging) →
docyrus-data-grid-page-design. - Record forms / detail / inline-edit UIs →
docyrus-record-detail-form-design. - CRM-style two-pane detail pages →
docyrus-crm-like-detail-page-design. - Query payloads / API calls (filters, aggregations, child queries) →
docyrus-api-dev.
Component catalog (web)
Each row links to the component's llms.txt — read it before implementing.
Data grids, tables, galleries & pivots
| Component | Import | Description |
|---|---|---|
| Data Grid | @docyrus/ui/components/data-grid |
A virtualized, editable spreadsheet-like data grid with sorting, filtering, grouping, cell selection, and keyboard navigation. |
| Data Grid View Select | @docyrus/ui/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. |
| Data Table | @docyrus/ui/components/data-table |
A lightweight, read-only TanStack table for Docyrus data sources with value renderers, row selection, grouping, and optional pagination. |
| Data Gallery | @docyrus/ui/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 Table Filter | @docyrus/ui/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 | @docyrus/ui/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. |
| Tree Table | @docyrus/ui/components/tree-table |
Tree Table component with multiple variants and sizes. |
| Tree View | @docyrus/ui/components/tree-view |
Tree View component with multiple variants and sizes. |
| Pivot Grid | @docyrus/ui/components/pivot-grid |
A standalone pivot grid with 3-level row and column hierarchies, subtotals, grand totals, drilldown, pinning, resizing, and export. |
| Pivot Calendar | @docyrus/ui/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. |
| PivotFilter | @docyrus/ui/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. |
Records, forms, schemas & values
| Component | Import | Description |
|---|---|---|
| Form Fields | @docyrus/ui/components/form-fields |
Dynamic form field system powered by TanStack Form. 49 field types with automatic dispatch via DynamicFormField. |
| Value Renderers | @docyrus/ui/components/value-renderers |
Read-only value display system for table cells, detail views, and kanban cards. 44 renderer types with automatic dispatch via DynamicValue. |
| Form Builder | @docyrus/ui/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. |
| Json Schema Form | @docyrus/ui/components/json-schema-form |
Json Schema Form component with multiple variants and sizes. |
| Json Schema Designer | @docyrus/ui/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. |
| Editable Record Detail | @docyrus/ui/components/editable-record-detail |
Inline record editing with change tracking, validation, hidden fields, and a floating action bar. |
| Editable Value | @docyrus/ui/components/editable-value |
Inline editable field with display/edit mode switching, popover auto-open, and change tracking. |
| Schema Repeater | @docyrus/ui/components/schema-repeater |
Schema Repeater component with multiple variants and sizes. |
| Query Builder | @docyrus/ui/components/query-builder |
Query Builder component. |
Scheduling, time & boards
| Component | Import | Description |
|---|---|---|
| Calendar | @docyrus/ui/components/calendar |
Calendar component. |
| Kanban | @docyrus/ui/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. |
| Gantt | @docyrus/ui/components/gantt |
A Gantt chart component with drag-and-drop task scheduling, timeline zoom, custom markers, and sidebar navigation. |
| Timeline | @docyrus/ui/components/timeline |
Vertical timeline with status indicators, alternate layout, animated entrance, and custom content slots. |
| Resource Scheduler Panel | @docyrus/ui/components/resource-scheduler-panel |
Resource Scheduler Panel component. |
| Time Slot Scheduler | @docyrus/ui/components/time-slot-scheduler |
Time Slot Scheduler component. |
| Date Time Picker | @docyrus/ui/components/date-time-picker |
Date Time Picker component with multiple variants and sizes. |
| Date Time Range Picker | @docyrus/ui/components/date-time-range-picker |
Date Time Range Picker component with multiple variants and sizes. |
| Day Picker | @docyrus/ui/components/day-picker |
Day Picker component with multiple variants and sizes. |
| Duration Select | @docyrus/ui/components/duration-select |
Duration Select component with multiple variants and sizes. |
Inputs, pickers & buttons
| Component | Import | Description |
|---|---|---|
| Avatar Select | @docyrus/ui/components/avatar-select |
Avatar Select component with multiple variants and sizes. |
| Avatar Thumbnail | @docyrus/ui/components/avatar-thumbnail |
Avatar Thumbnail component with multiple variants and sizes. |
| Radio Group | @docyrus/ui/components/radio-group |
Radio Group component with multiple variants and sizes. |
| Mega Select | @docyrus/ui/components/mega-select |
Mega Select component. |
| Tree Select | @docyrus/ui/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. |
| Search Input | @docyrus/ui/components/search-input |
Search Input component with multiple variants and sizes. |
| Docyrus Data Source Picker | @docyrus/ui/components/docyrus-data-source-picker |
Docyrus Data Source Picker component with multiple variants and sizes. |
| Place Autocomplete | @docyrus/ui/components/place-autocomplete |
Place Autocomplete component with multiple variants and sizes. |
| Docyrus Icon | @docyrus/ui/components/docyrus-icon |
Docyrus Icon component with multiple variants and sizes. |
| Morph Popover | @docyrus/ui/components/morph-popover |
Morph Popover component with multiple variants and sizes. |
| Confirmation Button | @docyrus/ui/components/confirmation-button |
Confirmation Button component with multiple variants and sizes. |
| Contact Channels Field | @docyrus/ui/components/contact-channels-field |
A backend-agnostic, fully controlled editor for a record's contact channels, their consent cache and validation status. |
| Stepper | @docyrus/ui/components/stepper |
A multi-step progress indicator with 6 visual variants, horizontal/vertical orientation, animated transitions, and customizable step icons. |
Panels, activity, cards & notifications
| Component | Import | Description |
|---|---|---|
| Comments Panel | @docyrus/ui/components/comments-panel |
Comments Panel component. |
| Contact Activity Panel | @docyrus/ui/components/contact-activity-panel |
Contact Activity Panel component. |
| Record Activity Panel | @docyrus/ui/components/record-activity-panel |
Record Activity Panel component. |
| File Attachment Panel | @docyrus/ui/components/file-attachment-panel |
File Attachment Panel component. |
| Notifications Panel | @docyrus/ui/components/notifications-panel |
Notifications Panel component with multiple variants and sizes. |
| Notification Stack | @docyrus/ui/components/notification-stack |
A stacked notification card system with swipe-to-dismiss gestures, auto-pagination, action buttons, and animated transitions. |
| Log Activity Form | @docyrus/ui/components/log-activity-form |
Log Activity Form component. |
| Pricing Engine Panel | @docyrus/ui/components/pricing-engine-panel |
Pricing Engine Panel component. |
| Record Sharing | @docyrus/ui/components/record-sharing |
Record Sharing component. |
| Awesome Card | @docyrus/ui/components/awesome-card |
A card with a hatched-stripe header and an inset content area, perfect for displaying stats and metrics. |
| Awesome Stats | @docyrus/ui/components/awesome-stats |
Data-driven metric cards with grid, flex, and animated tabs layouts. |
Messaging, chat & AI
| Component | Import | Description |
|---|---|---|
| Email Composer | @docyrus/ui/components/email-composer |
Rich text email composer with sender-account picker, formatting toolbar, recipients, attachments, and i18n support. |
| Instant Message Composer | @docyrus/ui/components/instant-message-composer |
Composer for SMS and WhatsApp with channel switching, recipient chips, attachments, and SMS character counting. |
| Team Chat Channel | @docyrus/ui/components/team-chat-channel |
Team Chat Channel component. |
| Editor Agent | @docyrus/ui/components/editor-agent |
Editor Agent component (embeddable AI assistant drawer for the code/template editors). |
Editors, code workbenches & media
| Component | Import | Description |
|---|---|---|
| HTML Template Editor | @docyrus/ui/components/html-template-editor |
WYSIWYG document editor for authoring Handlebars-aware HTML templates (quotes, invoices, reports). Word-style A4 page surface, tabs (Visual / Code / Data / Preview / PDF), 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. |
| Handlebars Editor | @docyrus/ui/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. |
| Jsonata Editor | @docyrus/ui/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. |
| Simple Markdown Editor | @docyrus/ui/components/simple-markdown-editor |
Simple Markdown Editor component with multiple variants and sizes. |
| Image Editor | @docyrus/ui/components/image-editor |
An image editor with crop, brightness, saturation, contrast, and hue adjustments, supporting rectangle and circle stencils with zoom controls. |
| Map | @docyrus/ui/components/map |
Interactive map component built on Leaflet with SSR-safe lazy loading, theme-aware tiles, marker clustering, drawing tools, custom controls, and geolocation. |
Adaptive Cards (Microsoft)
| Component | Import | Description |
|---|---|---|
| Adaptive Card | @docyrus/ui/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 | @docyrus/ui/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. |
Dialogs & data wizards
| Component | Import | Description |
|---|---|---|
| Create Record Dialog | @docyrus/ui/components/create-record-dialog |
Create Record Dialog component with multiple variants and sizes. |
| Record Delete Confirm Dialog | @docyrus/ui/components/record-delete-confirm-dialog |
Record Delete Confirm Dialog component. |
| Delete Confirm Dialog | @docyrus/ui/components/delete-confirm-dialog |
Delete Confirm Dialog component with multiple variants and sizes. |
| Data Import Wizard | @docyrus/ui/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. |
| Dummy Data Generator | @docyrus/ui/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. |
| Awesome Dialog | @docyrus/ui/components/awesome-dialog |
Awesome Dialog component. |
Docyrus-connected components
These require an authenticated @docyrus/api-client (passed as a client prop or wired through the matching useDocyrus* hook). Their docs live under web/docyrus/.
| Component | Import | Description |
|---|---|---|
| Bulk Update Dialog | @docyrus/ui/components/bulk-update-dialog |
Bulk Update Dialog component (apply a field change across many selected records). |
| Contact Channels Panel | @docyrus/ui/components/contact-channels-panel |
A Docyrus-backed panel for managing a record's contact channels, the append-only consent ledger and the validation engine. |
| Docyrus Agent | @docyrus/ui/components/docyrus-agent |
AI-powered conversational agent component with chat, action panel, and trigger modes. |
| Docyrus Data Export Menu | @docyrus/ui/components/docyrus-data-export-menu |
Docyrus Data Export Menu component with multiple variants and sizes. |
| Docyrus Query Builder | @docyrus/ui/components/docyrus-query-builder |
Visual query builder for Docyrus data sources — filters, columns, sorting, calculations, formulas, pivots, and child queries. |
| DSQL Editor | @docyrus/ui/components/dsql-editor |
A two-pane workbench for writing and running DSQL (security-scoped SQL) over Docyrus data sources, with a result grid and an embedded AI agent. |
| Record PDF Export | @docyrus/ui/components/record-pdf-export |
A three-step wizard (Select a Template → Preview → PDF) that renders a Docyrus data source record to PDF using its saved HTML templates, with an optional editable-template mode. |
Hooks
@docyrus/ui ships generic context hooks (formatting, i18n, click-outside, export) and a large family of useDocyrus* data hooks that wire a component to a Docyrus data source in one call. The full catalog — descriptions, imports, and llms.txt links — is in references/hooks-catalog.md.
Quick map of the highest-value data hooks:
useDocyrusDataGrid/useDocyrusDataTable/useDocyrusDataGallery→ list pages.useDocyrusFormView→ create/edit/view record forms.useDocyrusKanban,useDocyrusCalendar,useDocyrusMapView,useDocyrusPivotGrid,useDocyrusPivotCalendar,useDocyrusPivotFilter→ the matching visualization components.useDocyrusTenant→ mount once to enable tenant-aware date/number formatting everywhere.useDocyrusFieldComponent→ resolve the right input/renderer/cell for any field type.
Notes
- This catalog is web (
@docyrus/ui) only. React Native components ship from@docyrus/ui-native(@docyrus/rn-<name>) and are documented underhttps://ui.docy.app/docs/native/…(seehttps://ui.docy.app/llms-native.txt). - Descriptions are mirrored from each page's docs frontmatter. A terse "X component with multiple variants and sizes." line means the page itself carries the detailed API — always fetch the
llms.txtpage before implementing. - Components are distributed via a self-hosted shadcn registry; in a Docyrus app you typically already have
@docyrus/uias a dependency, soimportdirectly. Usedocyrus add …when copying source into a standalone shadcn-style project.