Skip to content

README.md

Latest commit

 

History

History
235 lines (171 loc) · 11.1 KB

README.md

File metadata and controls

235 lines (171 loc) · 11.1 KB
Raw

🚀 SuperBlazorComponents

NuGet License: MIT .NET 10

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

SuperBlazorComponents demo website home page

✨ Components

Preview Component Description Docs
SuperDataGrid preview SuperDataGrid Virtualized data grid — frozen columns/rows, hierarchical lazy-loading rows, reordering, resizing, filtering, sorting, inline editing, row selection, settings persistence 📖 SUPERDATAGRID.md
SuperDataGrid exporter preview SuperDataGrid Exporter Optional CSV and Excel export extension for checked rows, including filtered, sorted and virtualized data 📖 SUPERDATAGRIDEXPORTER.md
SuperLayout preview SuperLayout Responsive app layout — header, sidebar, body, footer, chat panel with collapsible sidebar 📖 SUPERLAYOUT.md
SuperContext preview SuperContext Context-aware tabs and contextual panels — discover components by runtime type and zone, render one or many contexts, and isolate host state per instance 📖 SUPERCONTEXT.md
SuperTabs preview SuperTabs Dynamic tabbed interface — badges, closable tabs, lazy loading, persistence (URL + localStorage), keyboard navigation, service-driven management 📖 SUPERTABS.md
SuperSplitter preview SuperSplitter Resizable split panels — horizontal/vertical, collapsible, state persistence 📖 SuperSplitter.md
SuperDateRangePicker preview SuperDateRangePicker Calendar-based date range picker with presets 📖 SUPERDATERANGEPICKER.md
SuperColorPicker preview SuperColorPicker Inline HSV color picker — hue/saturation/value canvas, alpha slider, HEX & RGB input modes 📖 SUPERCOLORPICKER.md
SuperDropDownColorPicker preview SuperDropDownColorPicker Compact dropdown variant of SuperColorPicker — colored swatch trigger button with floating popup 📖 SUPERCOLORPICKER.md
SuperHtmlEditor preview SuperHtmlEditor WYSIWYG HTML editor — toolbar (font, size, bold/italic/underline, colors, alignment, lists), lazy-loaded Monaco Editor for HTML source view 📖 SUPERHTMLEDITOR.md
SuperMarkdownEditor preview SuperMarkdownEditor Markdown editor — rendered view by default, source mode toggle, integrated Markdown help dialog 📖 SUPERMARKDOWNEDITOR.md
SuperButtons preview SuperButtons Buttons, split buttons, toggle buttons, link buttons, confirmation buttons 📖 SUPERBUTTONS.md
SuperTriStateCheckbox preview SuperTriStateCheckbox Bootstrap-friendly checkbox for nullable boolean values (true, false, null) 📖 SuperTriStateCheckbox.md
SuperTooltip preview SuperTooltip Tooltips for Blazor or HTML elements — text, HTML, Markdown, positions, delay, duration, click closing and manual control 📖 SuperTooltip.md
SuperDialog preview SuperDialog Modal dialog system with dynamic component rendering 📖 SUPERDIALOGS.md
SuperConfirmDialog preview SuperConfirmDialog Confirmation dialog with customizable buttons 📖 SUPERDIALOGS.md
SuperNotifications preview SuperNotifications Toast notifications with auto-dismiss and severity levels 📖 SUPERNOTIFICATIONS.md
SuperBreadCrumb preview SuperBreadCrumb Breadcrumb navigation with back-navigation support 📖 SUPERBREADCRUMB.md
SuperMenuItem preview SuperMenuItem Sidebar menu items with icons, badges, and nested submenus 📖 SUPERMENUITEM.md
ThemeToggle preview ThemeToggle Dark/light theme toggle with system preference detection and localStorage persistence 📖 THEMETOGGLE.md
Google Charts preview Google Charts Combo charts, pie charts, and pure SVG time series charts 📖 GOOGLECHARTS.md

📦 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_context_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.
  • Get the SuperContext guide and add contextual panels for my selected entity.
  • 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
  1. 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

🔗 Links