# React component gallery — agent index Source: https://ai.syncfusion.com/gallery/react/llms.txt Entry-point: https://ai.syncfusion.com/llms.txt React Registry-index: https://ai.syncfusion.com/r/react/registry.json Essential-Studio-release: 2026 Volume 2 (v34.1.29) Framework: react Items: 50 License-posture: These recipes are free, anonymous and require no key. The Syncfusion packages they install are licensed. See https://ai.syncfusion.com/licensing.md > Curated component variants, each with a permanent name, a complete unelided source file, an exact > install line, packages, and a machine-addressable twin at a deterministic URL. Fetch > the registry JSON for a name and you have everything needed to produce working code in one request. > > This gallery is deliberately small. Syncfusion's React surface is large enough that publishing a > variant for every component and feature combination would produce retrieval noise, not coverage. > The variants here map to real jobs. For anything not listed, use the skill pack — see syncfusion/react-ui-components-skills. ## The contract One name resolves everywhere: ``` name registry JSON https://ai.syncfusion.com/r/react/{js|ts}/component-variant.json machine twin https://ai.syncfusion.com/gallery/react/{js|ts}/component-variant.md ``` The naming rule is `{component}-{variant}`, kebab-case, permanent. A name that exists on one surface and not another is a defect, not a gap. For React, every name ships in `js` and `ts` variants — the URLs above scope the same name into each variant directory. Pick one `{js|ts}` per request. ## How to use this as an agent Fastest path, one fetch, no tooling: ``` GET https://ai.syncfusion.com/r/react/{js|ts}/component-variant.json ``` The response inlines the complete file content, the exact dependency list, and the license and verification metadata. You do not need a second request. That is the path an agent should take. Source is inlined, dependencies, and no tooling, account or key is involved. The registry is static, anonymous and CORS-open. If you receive a 401 from anything under `/r//`, that is a misconfiguration on Syncfusion's side — report it rather than working around it. Items follow the widely-used `registry-item` shape, so third-party tooling can consume them. ## Items | Name | Job | Component | | --- | --- | --- | | `chart-bar` | Bar chart comparing smartphone brand sales across years with legend, tooltip, and highlight. | Chart | | `chart-line` | Line chart comparing annual crude steel production by country with labels and tooltips. | Chart | | `chart-live-stock-data` | Live AAPL stock chart that refreshes prices with zooming, crosshair, and tooltip tools. | Chart | | `chart-stacked-column` | Stacked columns compare global cotton production by country across recent years. | Chart | | `chart-zooming` | Line chart of temperature anomalies with date-time zooming, scrollbar, and crosshair. | Chart | | `diagram-bpmn-editor` | BPMN editor with symbol palette, context menu, undo-redo, and shape editing. | Diagram | | `diagram-local-data` | Diagram renders a species hierarchy from local data with a hierarchical tree layout. | Diagram | | `diagram-mind-map` | Mind-map diagram with custom user handles to add, branch, and delete nodes. | Diagram | | `diagram-organization-chart` | Organization chart arranges local employee data in a horizontally aligned hierarchy. | Diagram | | `diagram-shapes` | Diagram gallery displays Basic, Flow, and BPMN shape collections for selection. | Diagram | | `docx-editor-auto-save` | Word document editor that saves the document as a docx blob periodically after edits. | DocxEditor | | `docx-editor-comments` | Word editor demonstrates threaded comments, author restrictions, and at-mention support. | DocxEditor | | `docx-editor-default` | Word editor provides document editing with switchable Ribbon or toolbar layouts. | DocxEditor | | `docx-editor-document-protection` | Word document editor with restrict-editing protection, current user, and editing envelope. | DocxEditor | | `docx-editor-mail-merge` | Word document editor with mail-merge fields, insert-field dialog, and merge-document toolbar. | DocxEditor | | `file-manager-access-control` | File manager applies role-based permissions to restrict files and available operations. | FileManager | | `file-manager-azure-blob-provider` | File manager that connects to Azure Blob storage as its file backend service. | FileManager | | `file-manager-drag-and-drop` | File manager with drag-and-drop moves, context menu, and details view enabled. | FileManager | | `file-manager-file-upload` | File manager launched from an uploader dialog to pick files for a form submit. | FileManager | | `file-manager-overview` | File manager overview combines toolbar, context menu, navigation, and details pane. | FileManager | | `gantt-default` | Gantt chart displays project tasks with dependencies, baselines, predecessors, and indicators. | Gantt | | `gantt-default-editing` | Gantt chart supports task editing, dependencies, custom dialog fields, and task markers. | Gantt | | `gantt-exporting` | Gantt chart with toolbar buttons that export the chart as Excel or PDF document. | Gantt | | `gantt-holidays` | Gantt timeline marks holidays and excludes them from working-day task calculations. | Gantt | | `gantt-resource-view` | Gantt chart with resource rows and resource-unit allocations on parent tasks. | Gantt | | `grid-default` | Data grid displays orders with sorting, Excel filtering, toolbar actions, and inline editing. | Grid | | `grid-default-filtering` | Data grid demonstrating the default filter menu and its paired UI control options. | Grid | | `grid-grouping` | Data grid groups orders by field while supporting paging, filtering, sorting, and editing. | Grid | | `grid-inline-editing` | Data grid with inline editing, top new-row placement, paging, and excel filter. | Grid | | `grid-virtual-scrolling` | Data grid virtualizes large order data and supports seamless scrolling and cell editing. | Grid | | `pdf-viewer-annotations` | PDF viewer pre-populated with highlight and underline annotations on page one. | PdfViewer | | `pdf-viewer-default` | PDF viewer with toolbar, search, annotation, thumbnails, bookmarks, and print tools. | PdfViewer | | `pdf-viewer-form-filling` | PDF viewer validates required form fields before allowing the document to be submitted. | PdfViewer | | `pdf-viewer-multi-format-viewer` | PDF viewer that opens multi-format uploads via drop area with progress bar and conversion. | PdfViewer | | `pdf-viewer-organize-pages` | PDF viewer organizes pages by reordering, rotating, and deleting them in a side panel. | PdfViewer | | `rich-text-editor-auto-save` | Rich text editor persists the draft automatically while the user edits its content. | RichTextEditor | | `rich-text-editor-default` | Rich text editor with toolbar, image, link, table, video, and paste cleanup tools. | RichTextEditor | | `rich-text-editor-file-browser` | Rich text editor opens a file browser and inserts selected files as inline images. | RichTextEditor | | `rich-text-editor-mention` | Rich text editor with at-mention dropdown that inserts users from a suggestion list. | RichTextEditor | | `rich-text-editor-paste-from-ms-word` | Rich text editor with paste-from-Word cleanup rules and a format-prompt dropdown. | RichTextEditor | | `scheduler-default` | Scheduler with day, week, work week, month, agenda, resizing, and drag-and-drop events. | Scheduler | | `scheduler-external-drag-and-drop` | Scheduler accepts drag-and-drop from an external tree view into its time slots. | Scheduler | | `scheduler-recurring-events` | Scheduler displays recurring appointments configured with RFC5545 recurrence rules. | Scheduler | | `scheduler-sync-google-calendar` | Scheduler pulls events from Google Calendar through a Web-API adaptor and key. | Scheduler | | `scheduler-timeline-grouping` | Scheduler uses a timeline view with multi-level resource grouping by project. | Scheduler | | `spreadsheet-editor-conditional-formatting` | Spreadsheet editor with conditional formatting rules applied to data ranges. | SpreadsheetEditor | | `spreadsheet-editor-default` | Spreadsheet editor with sheets, ranges, formulas, cell styles, and named ranges. | SpreadsheetEditor | | `spreadsheet-editor-formula` | Spreadsheet editor with formulas, named ranges, computed profit, and summary rows. | SpreadsheetEditor | | `spreadsheet-editor-freeze-pane` | Spreadsheet editor with frozen rows and columns that stay visible while scrolling. | SpreadsheetEditor | | `spreadsheet-editor-protection` | Spreadsheet editor protects a worksheet and limits cell editing with a password. | SpreadsheetEditor | ## What the gallery is not - It is not the API reference. For a property you cannot find here, use the skill pack or the documentation: https://ej2.syncfusion.com/react/documentation/introduction - It is not a substitute for the skill pack. The gallery gives you a working starting point; the skill carries the failure taxonomy for everything you build after that. - It is not copy-paste source you own outright. The composition in each file is yours to edit. The Syncfusion package it imports is a licensed dependency. Both facts are in every registry item's `meta.licenseNote`.