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](references/getting-started.md) for full project setup steps
• Scripts & CDN: See [add-script-reference-and-cdn.md](references/add-script-reference-and-cdn.md) for script loading options
• bUnit Testing: See [bunit-setup.md](references/bunit-setup.md) for unit testing setup
• Localization & Globalization: See [localization-globalization.md](references/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](references/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](references/add-script-reference-and-cdn.md)

Script Loading Options

3. bUnit Testing

Detailed guide: [bunit-setup.md](references/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](references/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:

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

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