Syncfusion Blazor component library with DataGrid, Charts, Scheduler, PDF, and 80+ components
From dotnet-blazornpx claudepluginhub markus41/claude --plugin dotnet-blazorThis skill is limited to using the following tools:
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
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: