Syncfusion^® CLI

4 Aug 20268 minutes to read

The Syncfusion^® CLI is a command-line tool that helps developers create, configure, and manage React projects with Syncfusion^® React components. It simplifies project setup by enabling developers to scaffold React applications, add ready-to-use Syncfusion^® React components, configure themes, set up Syncfusion^® MCP assistants, and install Syncfusion^® component skills.

For React development, the Syncfusion^® CLI supports project creation with Vite and Next.js. By using the Syncfusion^® CLI, developers can reduce manual configuration effort and quickly start building React projects with a recommended project structure, predefined templates, and the required component setup.

Prerequisites

Node.js 24+ (LTS recommended).
A terminal, command prompt, or shell environment is available.

Key Benefits

Project Scaffolding - Quickly create React projects with the required Syncfusion configuration and recommended project structure.
Component Templates - Start with ready-to-use React component templates such as Grid, Chart, Scheduler, Gantt, File Manager, Diagram, and Rich Text Editor, PDF Viewer, DOCX Editor and Spreadsheet Editor.
Theme and Styling Configuration - Easily apply built-in themes such as Material 3, Fluent 2, Bootstrap 5.3, and Tailwind 3 with CSS or SCSS support.
AI Assistant Integration - Configure MCP assistants and install Syncfusion^® components Skills to improve AI-assisted React development.
Project information: View environment and project details, review installed Syncfusion package information.

Installation

Install the Syncfusion^® CLI globally from npm.

npm install -g @syncfusion/syncfusion-cli

After installation, verify that the sf command is available.

sf --version
or 
sf -v

Interactive Mode

Interactive mode provides a guided command-line interface for accessing the main Syncfusion^® CLI actions. It is useful for users who prefer a menu-driven experience instead of manually entering complete commands.

To start interactive mode, run the CLI without additional arguments.

sf

The interactive menu displays the available CLI actions grouped by category.

 ──────────────────────────────────────────────────────────────
  Syncfusion CLI                                     v1.0.0
 ──────────────────────────────────────────────────────────────

? What would you like to do? (Use arrow keys)

  📦 PROJECT MANAGEMENT
>      Create a new project                              sf new
       Add component to an existing project              sf add
       Add theme to an existing project                  sf theme switch
       Show environment & project information            sf info

  🤖 AI & SKILLS
       Setup Model Context Protocol (MCP)                sf mcp init
       Add component skills to AI Agent                  sf skills install

  ℹ️ HELP & EXIT
       View help                                         sf --help
       Exit                                              Ctrl + C

The following options are available in interactive mode:

Option	Description	Command
Create a new project	Creates a new React project using Syncfusion React components.	sf new
Add component to existing project	Adds a Syncfusion React component to an existing project.	sf add
Add themes to existing project	Applies or changes the theme in the current project.	sf theme switch
Setup MCP	Configures MCP assistant support for the current project.	sf mcp init
Install Component Skills	Installs Syncfusion component skills to improve AI-assisted development.	sf skills install
Show Project info	Displays environment and project information.	sf info
View help	Displays Syncfusion CLI help information.	sf --help
Exit	Exits interactive mode.	Ctrl + C

Non-Interactive Mode

Non-interactive mode allows you to run Syncfusion CLI commands directly from the terminal by passing options as flags. This mode does not show prompts and is useful for automation, scripts, and repeatable project creation.

Syntax

sf <command> [options]

Example

The following example uses the new command to create a React Vite project with Syncfusion^® React components using the Grid template and Material 3 theme.

sf new my-app --framework react --template grid

Syncfusion CLI commands

The Syncfusion^® CLI provides commands to create projects, add Syncfusion^® components, configure the MCP server, and install skills, manage themes and inspect project information.

Project Creation Command

Create a new Syncfusion^® project with the desired framework, build tool, templates, themes, and other configuration options. The project creation commands help you quickly set up a development environment and start building applications with Syncfusion components.

`new` command

The new command creates a React project with Syncfusion^® React components. You can use this command to specify the framework, build tool, project type, component template, theme, styling format, MCP assistant configuration, and component skills installation.

Syntax

sf new <project-name> --framework <framework> --build-tool <buildTool> --type <type> --template <component> --theme <theme> --styling <styling> --mcp <editor> --skills

Example

The following command creates a React application using Vite with JavaScript, Grid template, Material 3 theme, CSS styling, Syncfusion^® Code Studio MCP configuration, and skills installation.

sf new my-app --framework react --build-tool vite --template grid --mcp code-studio --skills

Options

The new command supports options for configuring the project during creation.

Option	Description	Supported values
`--framework`	Specifies the application framework.	`react`, `angular`, `vue`
`--build-tool`	Specifies the React build tool used to create the application.	`vite`, `nextjs`
`--type`	Specifies the application language.	`js`, `ts`
`--template`	Specifies the starter template for the application.	`empty`, `grid`, `chart`, `scheduler`, `file-manager`, `gantt`, `diagram`, `rte`, `pdf-viewer`, `docx-editor`, `spreadsheet-editor`
`--theme`	Specifies the Syncfusion^® theme to configure in the application.	`material3`, `tailwind3`, `bootstrap5.3`, `fluent2`
`--styling`	Specifies the stylesheet format.	`css`, `scss`
`--mcp`	Configures Syncfusion^® MCP assistant support for the selected development environment.	`all`,`code-studio`, `vs-studio`, `cursor`,`jetbrains`
`--skills`	Installs Syncfusion^® components Skills during project creation.	No value required

Note: For React applications, the --build-tool option supports vite and nextjs.

Project-Specific Commands

The following commands must be run inside an existing Syncfusion^® project directory.

Add component command

Use the add command to add a supported Syncfusion^® component to an existing project.

Syntax

sf add <component>

Examples:

sf add grid
sf add chart
sf add scheduler
sf add gantt
sf add filemanager
sf add diagram
sf add rte
sf add pdf-viewer
sf add docx-editor
sf add spreadsheet-editor

MCP configuration Command

Use the mcp init command to configure Syncfusion^® MCP assistant support in an existing project.

sf mcp init code-studio

Skills command

Use the skills install command to install Syncfusion^® component skills in an existing project.

sf skills install

Theme switch command

Use the theme switch command to change the Syncfusion^® theme used in the project.

sf theme switch --tailwind3

Project information command

Use the info command to display project and environment details.

sf info

Default Values

When values are not provided, the Syncfusion CLI uses default values where applicable.

Setting	Default value
Framework	react
React build tool	vite
Language	js
Template	empty
Theme	material3
Styling	css
MCP	no
Skills	no

Help

The --help option displays the list of available Syncfusion CLI commands, arguments, and options.

sf --help

FAQ

Which frameworks are supported?
The Syncfusion CLI supports React, Angular, and Vue applications.

Which build tools are supported for React?
React applications support Vite and Next.js.

Can I create a project without interactive prompts?
Yes. Use flag mode mode to create projects non-interactively.

Can I add components after project creation?
Yes. Use the sf add <component> command to add supported Syncfusion^® components to an existing project.

Can I change the theme after project creation?
Yes. Use the sf theme switch <themeName> command to switch themes.

Does the Syncfusion CLI support Syncfusion^® MCP and Skills?
Yes. The CLI supports Syncfusion^® MCP assistant configuration and Syncfusion^® Components Skills installation.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Syncfusion^® CLI

Prerequisites

Key Benefits

Installation

Interactive Mode

Non-Interactive Mode

Syntax

Example

Syncfusion CLI commands

Project Creation Command

`new` command

Syntax

Example

Options

Project-Specific Commands

Add component command

MCP configuration Command

Skills command

Theme switch command

Project information command

Default Values

Help

FAQ

Syncfusion® CLI

Prerequisites

Key Benefits

Installation

Interactive Mode

Non-Interactive Mode

Syntax

Example

Syncfusion CLI commands

Project Creation Command

new command

Syntax

Example

Options

Project-Specific Commands

Add component command

MCP configuration Command

Skills command

Theme switch command

Project information command

Default Values

Help

FAQ

Syncfusion^® CLI

`new` command