Syncfusion React Components

The Syncfusion^® React (Pure React) library is a comprehensive collection of UI components built entirely with React functional components and hooks, ensuring seamless integration with React’s ecosystem. It offers a wide range of high-performance, customizable UI components with features:

React-first Design: Built from scratch exclusively for React, ensuring full compatibility with its ecosystem and architecture.
Modular Architecture: Import only the components you need, optimizing bundle size and scalability.
High Performance: Leverages React’s Virtual DOM for efficient rendering, updating only changed elements for fast, responsive UIs.
Seamless React Integration: Fully supports React hooks, state management, and modern development practices.
JSX-Driven Rendering: Built with JSX, integrating naturally with React’s state, props, and effects.
Modern Theming: Supports Material Design 3 with customizable tokens and SVG icons for crisp, fast UIs.
Responsive and Touch-Friendly: Optimized for desktop, tablet, and mobile with built-in gesture support.
Globalization Support: Includes localization, RTL, and culture-aware formatting for global applications.
Accessible by Default: Adheres to ADA, Section 508, and WCAG 2.2 accessibility standards.

EJ2 React vs Pure React

Syncfusion offers two complementary React component suites:

Pure React: Built from the ground up using React functional components and hooks for a modern, idiomatic React experience.
EJ2 React: Built on Syncfusion’s JavaScript engine, adapted for React.

Use this guide to choose what fits your project today—and mix them when needed.

Criteria	EJ2 React Components	Pure React Components
Technology Base	Built on Syncfusion’s JavaScript engine, adapted for React	Built natively using React (hooks, functional components)
React Ecosystem Integration	Integrates Syncfusion’s JS library with React bindings	Seamlessly integrates with React’s lifecycle, hooks, and state management
State Management	Manual DOM updates and sync via JS engine	Built-in reactive data flow; automatic re-renders
Rendering Efficiency	Direct DOM manipulation; less optimized	Virtual DOM for efficient updates
Performance	Trigger full DOM re-renders; less optimized.	Virtual DOM and diffing for efficient updates.
Lifecycle Management	Manual (e.g., init, destroy)	Built-in lifecycle hooks (useEffect, etc.)
Controlled vs Uncontrolled	Supports uncontrolled state via internal logic	Supports both controlled and uncontrolled modes idiomatically
Event Handling	Manual binding and delegation	Declarative and scoped within components
Customization	Fully customizable via props and templates	Fully customizable via props, JSX, and render props
Styling & Theming	Offers a broader collection of built-in themes, including Material, Bootstrap, Fluent, Tailwind, and more	Currently supports the Material theme, with more themes yet to be added
Icons support	Uses built-in font icons for legacy compatibility	Uses SVG icons for modern, scalable visuals
Template Rendering	Uses React portals for template rendering	Uses JSX, aligning with React’s lifecycle
RTL, Accessibility, and Globalization	Fully supported	Fully supported
Testing	Unit testing	Jest testing
Component Count	145+ mature components	20+ components (and growing)
React Version Support	React 16+	React 17+

When to use Pure React components?

You’re building a modern React application using hooks and functional components.
You prefer React-first components that align closely with React’s architecture and lifecycle.
You’re starting a new project using React 19 or later and want to leverage the latest React features.
You prefer using SVG icons for scalable, customizable, and modern visuals.
You need seamless testing with tools like Jest and React Testing Library.

Can I use both together?

Yes, you can use EJ2 React and Pure React components together in the same application without conflict.

Explore components

Browse popular categories and jump to component docs and demos.

Grid

Notifications

Calendars

Data Visualization

Inputs

DropDowns

Navigation

Layout

Buttons

Floating Action Button

Radio Button

Split Button

Get started quickly

Start with the Getting Started guide for the component you need. It covers installation, minimal setup, and the first render.
Add a component to your app and iterate. Use the examples as a reference for state, props, and event handling.
Explore customization. Try themes, templates, and configuration options to fit your design system.

Each component page includes runnable examples and API references to help you move from prototype to production.

Support and feedback

Need help? - If the docs don’t cover your scenario, open a support ticket or ask on StackOverflow using the tags: Syncfusion and pure-react.
Have ideas? - We’d love to hear them—share suggestions and requests in our feedback portal.