Menu
Syncfusion Blazor component library with DataGrid, Charts, Scheduler, PDF, and 80+ components
| name | syncfusion-blazor |
| description | Syncfusion Blazor component library with DataGrid, Charts, Scheduler, PDF, and 80+ components |
| allowed-tools | ["Read","Write","Edit","Grep"] |
| triggers | ["syncfusion","sfgrid","blazor grid","syncfusion chart","blazor scheduler","syncfusion component","essential ui kit"] |
dotnet add package Syncfusion.Blazor.Themes
dotnet add package Syncfusion.Blazor.Core
# Add specific component packages as needed:
dotnet add package Syncfusion.Blazor.Grid
dotnet add package Syncfusion.Blazor.Charts
dotnet add package Syncfusion.Blazor.Schedule
dotnet add package Syncfusion.Blazor.RichTextEditor
dotnet add package Syncfusion.Blazor.PdfViewer
dotnet add package Syncfusion.Blazor.Inputs
dotnet add package Syncfusion.Blazor.Navigations
// Program.cs
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(
builder.Configuration["Syncfusion:LicenseKey"]);
builder.Services.AddSyncfusionBlazor();
@* _Imports.razor *@
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Charts
<!-- Theme in App.razor -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<SfGrid DataSource="@_orders" AllowPaging="true" AllowSorting="true"
AllowFiltering="true" AllowGrouping="true"
Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Search", "ExcelExport" })">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"
Mode="EditMode.Dialog" />
<GridPageSettings PageSize="25" PageSizes="true" />
<GridFilterSettings Type="FilterType.Excel" />
<GridSelectionSettings Type="SelectionType.Multiple" />
<GridEvents OnActionComplete="ActionComplete" TValue="OrderDto"
OnToolbarClick="ToolbarClick" />
<GridColumns>
<GridColumn Field="@nameof(OrderDto.Id)" HeaderText="Order #" Width="100"
IsPrimaryKey="true" />
<GridColumn Field="@nameof(OrderDto.CustomerName)" HeaderText="Customer" Width="200" />
<GridColumn Field="@nameof(OrderDto.OrderDate)" HeaderText="Date" Width="140"
Format="d" Type="ColumnType.Date" />
<GridColumn Field="@nameof(OrderDto.Total)" HeaderText="Total" Width="120"
Format="C2" TextAlign="TextAlign.Right" />
<GridColumn Field="@nameof(OrderDto.Status)" HeaderText="Status" Width="130">
<Template>
@{
var order = (context as OrderDto)!;
<SfChip>
<ChipItems>
<ChipItem Text="@order.Status"
CssClass="@GetStatusClass(order.Status)" />
</ChipItems>
</SfChip>
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
<SfGrid TValue="OrderDto" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<SfDataManager Url="/api/orders" Adaptor="Adaptors.WebApiAdaptor" />
</SfGrid>
<SfChart Title="Monthly Revenue">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartPrimaryYAxis LabelFormat="C0" />
<ChartSeriesCollection>
<ChartSeries DataSource="@_revenueData" XName="Month" YName="Revenue"
Type="ChartSeriesType.Column" Fill="#4e73df" />
<ChartSeries DataSource="@_revenueData" XName="Month" YName="Target"
Type="ChartSeriesType.Line" Fill="#e74a3b" Width="2" />
</ChartSeriesCollection>
<ChartTooltipSettings Enable="true" />
<ChartLegendSettings Visible="true" />
</SfChart>
<SfSchedule TValue="AppointmentDto" Height="650px" SelectedDate="@DateTime.Today">
<ScheduleViews>
<ScheduleView Option="View.Day" />
<ScheduleView Option="View.Week" />
<ScheduleView Option="View.Month" />
<ScheduleView Option="View.Agenda" />
</ScheduleViews>
<ScheduleEventSettings DataSource="@_appointments" />
<ScheduleEvents OnActionComplete="OnScheduleAction" TValue="AppointmentDto" />
</SfSchedule>
Pre-built layout blocks: https://blazor.syncfusion.com/essential-ui-kit/blocks
Categories: Grid layouts, login pages, dashboards, pricing tables, profile cards, e-commerce, CRM
@* Example: Use grid block for responsive layout *@
<SfGrid DataSource="@_data">
@* Configured per Essential UI Kit block pattern *@
</SfGrid>
Built-in themes: bootstrap5, material3, fluent2, tailwind, fabric, highcontrast
Custom theme: Use ThemeStudio at https://blazor.syncfusion.com/themestudio/
// NEVER hardcode! Use one of:
// 1. User Secrets (development)
dotnet user-secrets set "Syncfusion:LicenseKey" "your-key"
// 2. Environment variable
Environment.GetEnvironmentVariable("SYNCFUSION_LICENSE_KEY");
// 3. Azure Key Vault (production)
builder.Configuration.AddAzureKeyVault(vaultUri, credential);
AI-powered tool that generates complete Blazor UI implementations from natural language prompts. Supports React, Angular, and Blazor. Completely free - no usage limits, token caps, or charges.
#sf_blazor_ui_builder tool command in IDEVS Code, Cursor, JetBrains IDEs, Code Studio
URL: https://www.syncfusion.com/explore/agentic-ui-builder/
The official @syncfusion/blazor-assistant MCP server provides:
Configured in .mcp.json:
{
"syncfusion-blazor": {
"command": "npx",
"args": ["-y", "@syncfusion/blazor-assistant@latest"],
"env": { "SYNCFUSION_API_KEY": "${SYNCFUSION_API_KEY}" }
}
}
Use mcp__syncfusion-blazor__* tools when:
Knowledge for launching, managing, and monitoring cowork sessions that orchestrate multiple plugin agents in parallel
Enhanced plan-authoring skill with Pre-Writing context gathering, task metadata, non-TDD templates, Red Flags, telemetry, and an automated plan linter. Use when you have a spec or requirements for a multi-step task, before touching code.
Select and coordinate multi-agent teams (topology kits, role-based squads, lifecycle, worktree isolation). Use this skill whenever launching parallel agents, designing a review board, running a debug council, scheduling an orchestrator-workers team, configuring agent tool restrictions, or deciding between solo and team execution. Triggers on: "launch a team", "parallel agents", "review board", "debug council", "architect-implementer-reviewer", "swarm", "multi-agent", "subagents for X", "team topology", "agent lifecycle".
Design, install, and debug Claude Code hooks across the full lifecycle (PreToolUse, PostToolUse, PostToolUseFailure, UserPromptSubmit, Notification, Stop, SessionStart, SessionEnd, PreCompact, SubagentStart, SubagentStop, TeammateIdle, PermissionRequest, Setup). Use this skill whenever a user asks to "install hooks", "add a pre-tool hook", "format on save", "block dangerous commands", "protect sensitive files", "restore context after compact", "enforce tests before stop", capture subagent telemetry, or runs /cc-hooks. Also triggers on "hooks not firing", "hook keeps blocking", or any configuration of .claude/settings.json hook sections.
Configure MCP servers for Claude Code — stdio vs HTTP, authentication, Tools/Resources/Prompts distinction, channels (CI webhook, mobile relay, Discord bridge, fakechat), and cost of always-loaded tools. Use this skill whenever adding an MCP server, debugging connection issues, choosing between MCP Tools vs Prompts vs Resources, installing channel servers, or managing .mcp.json. Triggers on: "MCP server", "mcp config", "add Obsidian MCP", "install context7", "channels", "webhook receiver", "mobile approval", "Discord bridge", "mcp not connecting".
Pick the right Claude model (Opus, Sonnet, Haiku) for a task and manage cost — decision matrix, cost tables, budget planning, cascading strategy. Use this skill whenever choosing a model, setting a token budget, optimizing session cost, or deciding whether to upgrade/downgrade mid-task. Triggers on: "which model", "cost", "budget", "haiku vs sonnet", "opus for this", "save tokens", "model cascading", "/cc-budget".