{"id":50733849,"url":"https://github.com/syncfusion/blazor-toolkit","last_synced_at":"2026-06-10T11:32:18.659Z","repository":{"id":357791614,"uuid":"1236568573","full_name":"syncfusion/blazor-toolkit","owner":"syncfusion","description":"Syncfusion Blazor Toolkit is an open-source collection of UI components designed to help developers build modern, high-performance web applications using Blazor.","archived":false,"fork":false,"pushed_at":"2026-05-21T11:57:11.000Z","size":6317,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-21T15:58:46.697Z","etag":null,"topics":["aspnetcore","blazor","blazor-components","blazor-server","blazor-webassembly","dotnet","opensource","oss","syncfusion","syncfusion-blazor","ui-components","ui-toolkit","webassembly"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syncfusion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-12T11:19:57.000Z","updated_at":"2026-05-21T10:08:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/syncfusion/blazor-toolkit","commit_stats":null,"previous_names":["syncfusion/blazor-toolkit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/syncfusion/blazor-toolkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncfusion%2Fblazor-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncfusion%2Fblazor-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncfusion%2Fblazor-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncfusion%2Fblazor-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syncfusion","download_url":"https://codeload.github.com/syncfusion/blazor-toolkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncfusion%2Fblazor-toolkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34151274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspnetcore","blazor","blazor-components","blazor-server","blazor-webassembly","dotnet","opensource","oss","syncfusion","syncfusion-blazor","ui-components","ui-toolkit","webassembly"],"created_at":"2026-06-10T11:32:16.053Z","updated_at":"2026-06-10T11:32:18.653Z","avatar_url":"https://github.com/syncfusion.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Syncfusion® Toolkit for Blazor\n\nThe **Syncfusion® Toolkit for Blazor** is a high-performance, open-source collection of lightweight UI components designed to accelerate Blazor application development (Server and WebAssembly). These controls help developers build modern, responsive, and feature-rich web applications faster, with clean code and excellent performance.\n\nBuilt with community collaboration in mind, the toolkit incorporates user feedback and contributions to deliver practical, high-quality components that integrate seamlessly with the broader Syncfusion Blazor ecosystem.\n\n[![NuGet](https://img.shields.io/nuget/v/Syncfusion.Blazor.Toolkit.svg?style=flat-square)](https://www.nuget.org/packages/Syncfusion.Blazor.Toolkit)\n[![GitHub license](https://img.shields.io/github/license/syncfusion/blazor-toolkit?style=flat-square)](https://github.com/syncfusion/blazor-toolkit/blob/main/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/syncfusion/blazor-toolkit?style=flat-square)](https://github.com/syncfusion/blazor-toolkit/stargazers)\n\n## Getting Started\n\n- [Install .NET](https://dotnet.microsoft.com/download) (8.0 or later recommended)\n- [Syncfusion Blazor Toolkit Documentation](https://blazor.syncfusion.com/documentation/toolkit/overview) *(update when live)*\n- [Development Guide](/.github/DEVELOPMENT.md)\n\n## Controls List\n\n| **Category**   | **Control**                | **Description**                                                                 |\n|----------------|----------------------------|---------------------------------------------------------------------------------|\n| Data Viz      | Charts                    | Versatile charting component for rendering interactive data visualizations like line, bar, pie, and more with zooming, tooltips, and legends. |\n| Buttons       | Button                    | Customizable button with support for icons, predefined styles (primary, success, etc.), sizes, and states like disabled or loading. |\n| Buttons       | ButtonGroup               | Groups multiple buttons together for unified styling and actions, ideal for toolbars or segmented controls. |\n| Buttons       | Checkbox                  | Toggleable input for single or grouped selections with customizable labels, states, and indeterminate mode. |\n| Buttons       | Radio Button              | Grouped selection control allowing single choice from options, with customizable appearance and accessibility support. |\n| Buttons       | Toggle Switch Button      | On/off toggle control (like a switch) for boolean inputs, with customizable labels and states. |\n| Calendars     | Calendar                  | Interactive monthly calendar view for date selection with navigation, multi-select, and range highlighting. |\n| Calendars     | DatePicker                | Popup calendar input for selecting single dates with formatting, validation, and culture support. |\n| Calendars     | DateTime Picker           | Combined date and time selector with calendar popup and time spinner for precise datetime input. |\n| Calendars     | TimePicker                | Time selection input with spinner or list view, supporting 12/24-hour formats and intervals. |\n| Inputs        | File Upload               | Drag-and-drop or browse file input with progress tracking, multiple file support, and validation. |\n| Inputs        | Numeric TextBox           | Input for numeric values with formatting, spin buttons, decimals, min/max ranges, and culture support. |\n| Inputs        | TextArea                  | Multi-line text input with auto-resize, character counter, and floating label support. |\n| Inputs        | Textbox                   | Single-line text input with floating labels, icons, validation states, and clear button. |\n| Layout        | Dialog                    | Modal/popup window for alerts, forms, or confirmations with drag, resize, and animation support. |\n| Layout        | Tooltip                   | Lightweight popup that displays contextual information when users hover over, focus on, or interact with a target element, with customizable positioning and animation support. |\n| Notification  | Spinner                   | Loading indicator with customizable size, type, and overlay for async operations. |\n\n## Installation\n\nInstall the Syncfusion Blazor Toolkit via NuGet:\n\n```bash\ndotnet add package Syncfusion.Blazor.Toolkit\n```\n\nAlternatively, add it directly in your `.csproj` file:\n\n```xml\n\u003cPackageReference Include=\"Syncfusion.Blazor.Toolkit\" Version=\"x.x.x\" /\u003e\n```\n\n## Setup in Your Blazor App\n\nTo use the Syncfusion® Blazor Toolkit, register the Syncfusion Blazor services in your `Program.cs` file as follows:\n\n**Program.cs**\n\n```csharp\nusing Syncfusion.Blazor.Toolkit;\n\nvar builder = WebApplication.CreateBuilder(args);\n\nbuilder.Services.AddRazorComponents()\n    .AddInteractiveServerComponents(); // or AddInteractiveWebAssemblyComponents() for WASM\n\n// Initialize the Syncfusion Blazor Toolkit by adding the below line of code\nbuilder.Services.AddSyncfusionBlazorToolkit();\n\n// Continue initializing your Blazor App here\n\nvar app = builder.Build();\n\n// ... rest of your app configuration\n```\n\n### Add imports to _Imports.razor\n\nAdd the following imports to your `_Imports.razor` file:\n\n```razor\n@using Syncfusion.Blazor\n@using Syncfusion.Blazor.Toolkit\n```\n\n### Add CSS to your App.razor\n\nAdd the Syncfusion Blazor Toolkit styles to the `\u003chead\u003e` section of your `App.razor` file:\n\n```html\n@* Add syncfusion blazor toolkit style reference *@    \n\u003clink id=\"syncfusion-theme\" href=\"_content/Syncfusion.Blazor.Toolkit/styles/fluent.min.css\" rel=\"stylesheet\" /\u003e\n```\n\n## Usage Example\n\nHere's a quick example to get you started with one of the controls, such as the Chart:\n\nThe following Razor code demonstrates how to set up a basic `SfChart` using the Syncfusion® Blazor Toolkit. This code snippet should be included in a `.razor` page of your Blazor project. It sets up the necessary namespaces, binds data to the component, and configures the `SfChart` with two spline area series for comparing Online vs Retail sales data.\n\n**Pages/ChartExample.razor**\n\n```razor\n@page \"/chart-example\"\n@using Syncfusion.Blazor.Toolkit.Charts\n\n\u003ch3\u003eOnline vs Retails\u003c/h3\u003e\n\n\u003cSfChart Height=\"330px\" Title=\"Online vs Retails\"\u003e\n    \u003cChartPrimaryXAxis ValueType=\"Syncfusion.Blazor.Toolkit.ValueType.Category\" /\u003e\n    \u003cChartPrimaryYAxis Title=\"Sales in Units\"\u003e\n    \u003c/ChartPrimaryYAxis\u003e   \n        \u003cChartSeries DataSource=\"@ChartData\"\n                     XName=\"X\"\n                     YName=\"Y\"\n                     Type=\"ChartSeriesType.SplineArea\"\n                     Name=\"Online\"\n                     Fill=\"#00BFFF\"\n                     Opacity=\"0.5\" /\u003e\n        \u003cChartSeries DataSource=\"@ChartData\"\n                     XName=\"X\"\n                     YName=\"Y1\"\n                     Type=\"ChartSeriesType.SplineArea\"\n                     Name=\"Retails\"\n                     Fill=\"#FF00CC80\"\n                     Opacity=\"0.5\" /\u003e \n    \u003cChartLegendSettings Visible=\"true\"\u003e\u003c/ChartLegendSettings\u003e\n    \u003cChartTooltipSettings Enable=\"true\"\n                          Format=\"${point.x} : \u003cb\u003e${point.y} Units\u003c/b\u003e\" /\u003e\n\u003c/SfChart\u003e\n\n@code {\n    private List\u003cChartDataPoint\u003e ChartData = new();\n\n    protected override void OnInitialized()\n    {\n        ChartData = new List\u003cChartDataPoint\u003e()\n        {\n            new ChartDataPoint { X = \"Jan\", Y = 35, Y1 = 28 },\n            new ChartDataPoint { X = \"Feb\", Y = 28, Y1 = 35 },\n            new ChartDataPoint { X = \"Mar\", Y = 34, Y1 = 32 },\n            new ChartDataPoint { X = \"Apr\", Y = 32, Y1 = 44 },\n            new ChartDataPoint { X = \"May\", Y = 40, Y1 = 32 },\n            new ChartDataPoint { X = \"Jun\", Y = 32, Y1 = 35 },\n            new ChartDataPoint { X = \"Jul\", Y = 35, Y1 = 41 },\n            new ChartDataPoint { X = \"Aug\", Y = 55, Y1 = 48 },\n            new ChartDataPoint { X = \"Sep\", Y = 38, Y1 = 52 },\n            new ChartDataPoint { X = \"Oct\", Y = 30, Y1 = 34 },\n            new ChartDataPoint { X = \"Nov\", Y = 25, Y1 = 36 },\n            new ChartDataPoint { X = \"Dec\", Y = 32, Y1 = 40 }\n        };\n    }\n}\n```\n\nDefine a simple data model C# class named `ChartDataPoint` to represent a data point in your application.\n\n**ChartDataPoint.cs**\n\n```csharp\n/// \u003csummary\u003e\n/// Represents a data point for the Chart with monthly sales data.\n/// \u003c/summary\u003e\npublic class ChartDataPoint\n{\n    /// \u003csummary\u003e\n    /// Gets or sets the month (X-axis value).\n    /// \u003c/summary\u003e\n    public string X { get; set; }\n\n    /// \u003csummary\u003e\n    /// Gets or sets the online sales in units (Y-axis value).\n    /// \u003c/summary\u003e\n    public double Y { get; set; }\n\n    /// \u003csummary\u003e\n    /// Gets or sets the retail sales in units (Y1-axis value).\n    /// \u003c/summary\u003e\n    public double Y1 { get; set; }\n}\n```\n\n## Support\n\nFor any other queries, reach our [Syncfusion support team](https://blazortoolkit.syncfusion.com/support/tickets/) through ticket.\n\n## Contributing\n\nContributions are welcome! If you'd like to contribute, please check out our [contributing guide](./.github/CONTRIBUTING.md) for details on how to get started. Whether you find a bug, have a feature request, or want to submit code, we appreciate your help in improving the toolkit.\n\nSee the [Development Guide](./.github/DEVELOPMENT.md) for more details about this repository and project structure.\n\n## About Syncfusion®\n\nFounded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion® has more than 35,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.\n \nToday, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [React](https://www.syncfusion.com/react-ui-components?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget)), mobile ([.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget) and [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget)).\n___\n\n[sales@syncfusion.com](mailto:sales@syncfusion.com?Subject=Syncfusion%20Maui%toolkit%20-%20NuGet) | [www.syncfusion.com](https://www.syncfusion.com?utm_source=nuget\u0026utm_medium=listing\u0026utm_campaign=blazor-toolkit-nuget) | Toll Free: 1-888-9 DOTNET","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusion%2Fblazor-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusion%2Fblazor-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusion%2Fblazor-toolkit/lists"}