Syncfusion® CLI

4 Aug 20268 minutes to read

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

For Angular development, the Syncfusion® CLI scaffolds the Angular project and then layers on the recommended Syncfusion project structure, predefined templates, and the required component setup. By using the Syncfusion® CLI, developers can reduce manual configuration effort and quickly start building Angular 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 Angular projects with the required Syncfusion configuration and recommended project structure.
  • Component Templates - Start with ready-to-use Angular 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 Angular 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 Angular project using Syncfusion Angular components. sf new
Add component to existing project Adds a Syncfusion Angular 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 an Angular project with Syncfusion® Angular components using the Grid template and Material 3 theme.

sf new my-app --framework angular --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, 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 an Angular project with Syncfusion® Angular components. You can use this command to specify the framework, component template, theme, styling format, MCP assistant configuration, and component skills installation.The CLI scaffolds the Angular project; therefore, all Angular projects are TypeScript-based by default.

Syntax

sf new <project-name> --framework angular --template <component> --theme <theme> --styling <styling> --mcp <editor> --skills

Example

The following command creates an Angular application with the Grid template, Tailwind 3 theme, CSS styling, Syncfusion® Code Studio MCP configuration, and skills installation.

sf new my-app --framework angular --template grid --theme tailwind3 --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. angular,react,vue
--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

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 angular
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.

Can I create a project without interactive prompts?
Yes. Use flag mode to create projects non-interactively. For Angular, pass --framework angular along with the desired options.

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.