syncfusion-blazor-common

Q: How do I install syncfusion-blazor-common?

Run npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-common in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-blazor-common/ (personal) or .claude/skills/syncfusion-blazor-common/ (project).

by syncfusionFrontend & Design

Set up Syncfusion Blazor components — project creation, NuGet packages, service registration, script loading, bUnit testing, and localization & globalization configuration

Installs: 410
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-common

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-blazor-common automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Syncfusion Blazor Getting Started

Setup and configuration guide for Syncfusion Blazor components in Blazor Web Apps.

When to Use

Use this skill when you need to:

Set up a new Blazor project with Syncfusion Blazor components
Create a Blazor Web App with specific .NET version targeting (net8.0, net9.0, net10.0, etc.)
Add Syncfusion components (Grid, Button, etc.) with features based on context
Optimize script loading with static assets or CDN
Set up bUnit testing for Syncfusion components

Quick Reference

Getting Started: See getting-started.md for full project setup steps
Scripts & CDN: See add-script-reference-and-cdn.md for script loading options
bUnit Testing: See bunit-setup.md for unit testing setup
Localization & Globalization: See localization-globalization.md for culture and localization setup

Prerequisites

.NET 8+ SDK
Blazor Web App project
Syncfusion account (free trial)
NuGet package access

1. Getting Started

Detailed guide: getting-started.md

Quick Setup

Create Blazor Web App with your chosen render mode and explicit .NET version (e.g., .NET 10)
Install Syncfusion.Blazor.Grid + Syncfusion.Blazor.Themes NuGet packages. All individual packages are listed here
Add @using Syncfusion.Blazor and relevant component namespaces to _Imports.razor
Register builder.Services.AddSyncfusionBlazor() in Program.cs
Add theme CSS and script references to App.razor
Use Syncfusion components in your pages

Key Rule: For Auto/WASM modes → register in both server and client projects Important: Always specify the target .NET framework version when creating projects to ensure compatibility

Quick Start Options

Blazor Playground: Browser-based, no local install
Template Studio: Pre-configured VS/VS Code project templates

2. Script References and CDN

Detailed guide: add-script-reference-and-cdn.md

Script Loading Options

Method	Best For
Static Web Assets (Recommended)	Optimal performance, offline support
CDN	Cloud-hosted, quick setup
Individual Scripts	Minimal component usage

3. bUnit Testing

Detailed guide: bunit-setup.md

Unit test Syncfusion Blazor components with bUnit.

Required Setup

Install bunit NuGet package, then register in each test:

using var ctx = new TestContext();
ctx.Services.AddSyncfusionBlazor()
   .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
ctx.Services.AddOptions();

Test Pattern

RenderComponent<TPage>() → render
FindComponent<SfButton>() → locate
.Click() → interact
MarkupMatches(...) → assert

Works with xUnit and NUnit (use Bunit.TestContext for NUnit to avoid naming conflicts)

4. Localization and Globalization

Detailed guide: localization-globalization.md

Configure multi-language support and culture-specific formatting for Syncfusion Blazor components.

Key Concepts

Internationalization (i18n): Parsing and formatting dates, times, numbers, and currencies
Localization (l10n): Adding culture-specific customizations and translating UI text
Globalization: Combines both i18n and l10n

Quick Setup

Download and add culture-based .resx resource files from GitHub - ASK PERMISSION BEFORE DOWNLOAD THIS
Create a SyncfusionLocalizer class implementing ISyncfusionStringLocalizer

builder.Services.AddSyncfusionBlazor();
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

Set culture statically or dynamically (server, WebAssembly, or MAUI apps)
Create a CultureSwitcher component for dynamic culture selection

FAQ

What does the syncfusion-blazor-common skill do?

Set up Syncfusion Blazor components — project creation, NuGet packages, service registration, script loading, bUnit testing, and localization & globalization configuration

How do I install syncfusion-blazor-common?

Run npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-common in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-blazor-common/ (personal) or .claude/skills/syncfusion-blazor-common/ (project).

Which AI agents can use syncfusion-blazor-common?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-blazor-common safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-blazor-common?

It is published by syncfusion in syncfusion/blazor-ui-components-skills. It has 410 recorded installs.