SuperBlazorComponents 1.8.49

🚀 SuperBlazorComponents

High-performance, open-source Blazor component library for admin and line-of-business applications — built with Bootstrap 5.3 and zero third-party JS dependencies (except Google Charts).

🖼️ Demo

✨ Components

📦 Installation

dotnet add package SuperBlazorComponents

🔧 Setup

Register the services in your Program.cs:

builder.Services.AddSuperComponents();

🚀 Quick Start

@using SuperBlazorComponents.Components.SuperDataGrid

<SuperDataGrid TItem="Product"
               ItemsProvider="LoadProducts"
               Height="500px"
               AllowSorting="true"
               AllowFiltering="true"
               FreezeHeader="true"
               SelectionMode="SuperDataGridSelectionMode.Multiple"
               GridId="products-grid">
    <DataGridColumn Title="Name" For="@(c => c.Name)" />
    <DataGridColumn Title="Price" For="@(c => c.Price)" Width="120" />
    <DataGridColumn Title="Category" For="@(c => c.Category)" Width="150" />
</SuperDataGrid>

For tree-like datasets, enable Hierarchical="true" and branch inside ItemsProvider when request.IsHierarchyRequest is true. Parent and child rows use the same TItem type.

🤝 Contributing

Contributions are welcome! Feel free to open issues, suggest features, or submit pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

🌐 Live Demo

A live demo site is available at blazor.appliman.com

🤖 MCP Server

The demo site also exposes a public Model Context Protocol (MCP) server for AI-assisted development.

Use it when you want an MCP-compatible assistant to discover how to install and implement SuperBlazorComponents in another Blazor application.

• MCP endpoint: https://blazor.appliman.com/mcp
• Health check: https://blazor.appliman.com/mcp/health
• Transport: Streamable HTTP
• Authentication: none

The server exposes tools such as:

• list_super_components
• get_super_component_guide
• get_super_data_grid_guide
• get_super_datagrid_guide
• get_super_buttons_guide
• get_super_tabs_guide
• get_super_layout_guide
• get_super_dialogs_guide

Example prompts:

• Use the SuperBlazorComponents MCP server and show me how to add SuperDataGrid to this Blazor app.
• Get the SuperButtons guide and implement a confirmation delete button.
• List the available SuperBlazorComponents guides.

VS Code

In VS Code, open Command Palette → MCP: Add Server, choose HTTP, and enter:

https://blazor.appliman.com/mcp

Or create .vscode/mcp.json in your workspace:

{
  "servers": {
    "superblazorcomponents": {
      "type": "http",
      "url": "https://blazor.appliman.com/mcp"
    }
  }
}

Then open Copilot Chat in Agent mode and ask for a component guide.

Visual Studio

Visual Studio can discover MCP server configuration from several locations, including:

• %USERPROFILE%\.mcp.json
• <SOLUTIONDIR>\.mcp.json
• <SOLUTIONDIR>\.vs\mcp.json
• <SOLUTIONDIR>\.vscode\mcp.json

Example .mcp.json:

{
  "servers": [
    {
      "name": "superblazorcomponents",
      "transport": "http",
      "url": "https://blazor.appliman.com/mcp"
    }
  ]
}

After saving the file, restart or reload GitHub Copilot Agent mode in Visual Studio so the MCP tools are discovered.

Docker Desktop MCP Toolkit

Docker Desktop MCP Toolkit can be used as a gateway between MCP clients and a profile of MCP servers.

1. Enable Docker Desktop → Settings → Beta features → MCP Toolkit.
2. Open Docker Desktop → MCP Toolkit → Profiles.
3. Create a profile, for example superblazor-docs.
4. Add a remote HTTP MCP server with this URL:

https://blazor.appliman.com/mcp

5. Connect your client from the Clients tab, or configure the gateway manually.

Manual VS Code-style gateway configuration:

{
  "servers": {
    "MCP_DOCKER": {
      "type": "stdio",
      "command": "docker",
      "args": ["mcp", "gateway", "run", "--profile", "superblazor-docs"]
    }
  }
}

You can also run the gateway directly:

docker mcp gateway run --profile superblazor-docs

References

• MCP C# SDK
• VS Code MCP configuration
• Visual Studio MCP servers
• Docker Desktop MCP Toolkit

🔗 Links

• Live Demo: blazor.appliman.com
• GitHub: github.com/appliman/superblazorcomponents
• NuGet: nuget.org/packages/SuperBlazorComponents
• Changelog: CHANGELOG.md