Guide
Docyrus UI is built on top of the shadcn ecosystem and depends on several major open-source libraries.
Component Distributions
UI Primitives
| Library | Description | Used In |
|---|---|---|
| Radix UI | Unstyled, accessible UI primitives for dialogs, popovers, tooltips, dropdowns, and more. | Primitives, Components |
| Ariakit | Accessible components with WAI-ARIA patterns. | Select, Combobox |
| Base UI | Unstyled React components from the MUI team. | Components |
Rich Text & Code Editing
| Library | Description | Used In |
|---|---|---|
| Plate.js | Plugin-based rich text editor with AI, comments, mentions, tables, and 30+ plugins. | Editor |
| CodeMirror | Extensible code editor with syntax highlighting and language support. | Code Editor |
| Shiki | Syntax highlighter powered by TextMate grammars with dual-theme support. | Code Blocks |
Data & Tables
| Library | Description | Used In |
|---|---|---|
| TanStack Table | Headless table library with sorting, filtering, grouping, and virtualization. | Data Grid |
| TanStack Virtual | Headless virtualization for large lists and grids. | Data Grid |
| Recharts | Composable charting library built on D3. | Charts |
| ExcelJS | Excel file generation and parsing for data export. | Data Grid, Pivot Grid |
| JSONata | Lightweight query and transformation language for JSON data. | Pivot Grid, Pricing Engine |
Forms & Input
| Library | Description | Used In |
|---|---|---|
| React Hook Form | Performant form library with @hookform/resolvers for schema validation. | Form Fields |
| Zod | TypeScript-first schema validation library. | Form Validation |
| React Day Picker | Flexible date picker component. | Day Picker, Date Time Picker |
| date-fns | Modern date utility library for formatting, parsing, and manipulation. | Calendar, Scheduler |
| cmdk | Fast, composable command palette component. | Command |
| React Query Builder | Composable query builder for constructing complex filter expressions. | Query Builder |
| input-otp | One-time password input component. | OTP Input |
Drag & Drop
| Library | Description | Used In |
|---|---|---|
| dnd kit | Modern drag and drop toolkit for React with sortable support. | Kanban, Sortable Lists |
| React DnD | Drag and drop for complex interactions with HTML5 backend. | Gantt, Resource Scheduler |
Animation & Motion
| Library | Description | Used In |
|---|---|---|
| Motion | Production-ready animation library for enter/exit transitions and layout animations. | Components |
| GSAP | High-performance animation platform for complex sequenced animations. | Components |
Maps & Location
| Library | Description | Used In |
|---|---|---|
| Leaflet | Interactive map library with marker clustering, drawing tools, and fullscreen support. | Map |
| React Leaflet | React components for Leaflet maps. | Map |
Media & Content
| Library | Description | Used In |
|---|---|---|
| React Player | Video and audio player supporting multiple sources. | Video Player |
| Embla Carousel | Lightweight carousel with touch support and extensible plugins. | Carousel |
| React Email Editor | Drag and drop email template builder. | Email Composer |
Layout & UI
| Library | Description | Used In |
|---|---|---|
| Vaul | Drawer component with smooth touch interactions. | Drawer |
| Sonner | Opinionated toast notification library. | Toast |
| Resizable Panels | Resizable panel layout system. | Resizable |
AI & LLM
| Library | Description | Used In |
|---|---|---|
| Vercel AI SDK | React hooks and utilities for building AI-powered interfaces. | Docyrus Agent, Editor AI |