# Syncfusion React UI Builder
**Syncfusion React UI Builder** is an AI-powered agent skill that transforms your UI requirements into production-ready React components. It leverages Syncfusion's extensive React component library to generate accessible, responsive, and theme-consistent user interfaces.
### Key Features
- **AI Agent Orchestration**: Intelligent workflow handling design thinking, component selection, code generation, and validation
- **Syncfusion Integration**: Access to professional React UI components
- **WCAG 2.1 AA Accessibility**: Built-in accessibility compliance with semantic HTML and ARIA support
- **Responsive Design**: Mobile-first CSS with adaptive breakpoints
- **Design System Support**: Tailwind 3, Bootstrap 5, Material 3 or custom theming with Syncfusion theme alignment
- **TypeScript Support**: Full type coverage for props, state, and event handlers
## Table of Contents
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [How It Works](#how-it-works)
- [Usage](#usage)
- [Support](#Support)
## Prerequisites
Before using React UI Builder, ensure your environment meets these requirements:
| Requirement | Description |
|-------------|-------------|
| **APM** | [Install APM](https://microsoft.github.io/apm/getting-started/installation/) - Agent Package Manager for skill installation |
| **React Project** | Active React 18+, Next.js 13+, Vite, or CRA project - refer [here](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start)|
| **Node.js 18+** | npm package manager installed |
| **Syncfusion License** | [Commercial](https://www.syncfusion.com/sales/unlimitedlicense), [Free Community](https://www.syncfusion.com/products/communitylicense), or [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) |
## Installation
```bash
# Install for GitHub Copilot
apm install syncfusion/react-ui-builder -t copilot
# Install for Claude Code
apm install syncfusion/react-ui-builder -t claude
# Install for Cursor
apm install syncfusion/react-ui-builder -t cursor
# Install for Codex
apm install syncfusion/react-ui-builder -t codex
```
## How It Works
The React UI Builder uses an **8-stage AI orchestration workflow** that transforms your requirements into production-ready components.
**Stage 1: Intent Analysis**
Parse the user's natural language query to identify component types, layout intent, and desired functionality.
**Stage 2: Project Detection**
Automatically detect the project framework (React, Next.js, Vite, CRA), package manager, and existing theme configuration.
**Stage 3: Component Mapping**
Select appropriate Syncfusion components and their required icons based on the identified intent.
**Stage 4: Theming & Design System**
Lock in design system decisions including CSS framework, Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2), color modes (light, dark) colors, spacing, typography upon users confirmation.
**Stage 5: Code Generation**
Produce TypeScript React components with full props interfaces and CSS/styling scaffolding.
**Stage 6: Dependency Management**
Install required Syncfusion packages and their peer dependencies.
**Stage 7: Validation**
Run WCAG accessibility checks, security scans, and performance audits. Request approval before code insertion.
**Stage 8: Code Insertion**
Create new files or patch existing ones following the project's structure and coding conventions.
## Usage
Choose the `syncfusion-react-ui-builder` agent in the AI chat panel and Invoke the skill through your AI assistant by describing what you want to build:
```
Design a full-viewport premium SaaS admin dashboard that feels fluid, spacious, and visually rich—avoid boxed or narrow layouts. Use a soft neutral background (#F8FAFC) with layered white surfaces, subtle shadows, soft borders, and light gradients to create depth. Include a floating glass-style header (logo, search, notifications, avatar dropdown) and a stylish collapsible sidebar with tinted background, smooth animations, and highlighted active states. Structure the main area with an asymmetrical, responsive grid layout using generous spacing (24–32px), featuring larger, visually dominant cards (with icons, gradients, trend indicators, and hover lift), charts (line/bar/pie in cards), and an enhanced data grid (sticky header, sorting, filtering, badges, hover states, pagination). Apply a modern design system (Inter font, 4/8px spacing, muted grays, indigo/blue accents, semantic colors) with smooth 150–250ms transitions, micro-interactions, tooltips, and high accessibility (WCAG AA, ≥44px targets).
```
Generated code follows best practices with accessible, semantic HTML, responsive mobile-first layouts, strong TypeScript typing, and built-in security measures such as input validation and avoidance of hardcoded secrets.
## Best Practices
- Maintain consistency in file structure, naming, and coding standards.
- Use advanced AI models (e.g., Claude Sonnet 4.6+) for better code quality.
- Review everything before production—replace placeholders and verify logic, security, and compatibility.
## Support
Product support is available through the following media.
- [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed response in 24 hours | Unlimited tickets | Holiday support
- [Community forum](https://www.syncfusion.com/forums/essential-js2)
- [Request feature or report bug](https://www.syncfusion.com/feedback/react)
- [Live chat](https://www.syncfusion.com/support)