Imported from syncfusion/blazor-ui-components-skills (skills/syncfusion-blazor-common/SKILL.md). Install upstream with npx skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-common. Copyright stays with the author.

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

1. Create Blazor Web App with your chosen render mode and explicit .NET version (e.g., .NET 10)
2. Install Syncfusion.Blazor.Grid + Syncfusion.Blazor.Themes NuGet packages. All individual packages are listed here
3. Add @using Syncfusion.Blazor and relevant component namespaces to _Imports.razor
4. Register builder.Services.AddSyncfusionBlazor() in Program.cs
5. Add theme CSS and script references to App.razor
6. 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

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

1. RenderComponent<TPage>() → render
2. FindComponent<SfButton>() → locate
3. .Click() → interact
4. 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

1. Download and add culture-based .resx resource files from GitHub - ASK PERMISSION BEFORE DOWNLOAD THIS
2. Create a SyncfusionLocalizer class implementing ISyncfusionStringLocalizer
3. Register in Program.cs:

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

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