Angry Monkey CloudComponents

Free, open-source Blazor component libraries for .NET 10.

Packages

Package	Version	Downloads	Description
`AngryMonkey.CloudComponents`			Core UI primitives: Popup, Dialog, Switch, Tabs, ProgressBar, VolumeBar
`AngryMonkey.CloudComponents.DataGrid`			Data grid with sorting, paging, selection, actions, reordering, and export
`AngryMonkey.CloudComponents.VideoPlayer`			HTML5 and HLS video player with controls, casting, and settings
`AngryMonkey.CloudComponents.Maps`			Azure Maps wrapper with markers, regions, geocoding, search, and location lock
`AngryMonkey.CloudComponents.Maps.Maui`			.NET MAUI location services for CloudComponents Maps
`AngryMonkey.CloudComponents.TextEditor`			Rich-text editor with formatting, media embeds, and validated HTML view
`AngryMonkey.CloudComponents.Icons`			SVG icon and logo Razor components

Quick start

1. Install

dotnet add package AngryMonkey.CloudComponents
dotnet add package AngryMonkey.CloudComponents.DataGrid
dotnet add package AngryMonkey.CloudComponents.VideoPlayer
dotnet add package AngryMonkey.CloudComponents.Maps
dotnet add package AngryMonkey.CloudComponents.TextEditor
dotnet add package AngryMonkey.CloudComponents.Icons

2. Add namespaces to `_Imports.razor`

@using CloudComponents.Basic
@using CloudComponents.DataGrid.Components
@using CloudComponents.DataGrid.Models
@using CloudComponents.VideoPlayer
@using CloudComponents.Maps.Components
@using CloudComponents.Maps.Models
@using CloudComponents.Maps.Services
@using AngryMonkey.CloudComponents.TextEditor.Components
@using AngryMonkey.CloudComponents.TextEditor.Models
@using AngryMonkey.CloudComponents.TextEditor.Services
@using CloudIcons
@using CloudIcons.Icons
@using CloudIcons.Logos
@using AngryMonkey.CloudComponents.Markdown

3. Add required assets to `wwwroot/index.html`

<!-- Core components CSS + JS -->
<link rel="stylesheet" href="_content/AngryMonkey.CloudComponents/css/amc-components.css" />
<script src="_content/AngryMonkey.CloudComponents/js/amc-components.js"></script>
<script src="_content/AngryMonkey.CloudComponents/js/dialog.js"></script>

<!-- VideoPlayer -->
<script src="_content/AngryMonkey.CloudComponents.VideoPlayer/hls.js"></script>
<script src="_content/AngryMonkey.CloudComponents.VideoPlayer/videoPlayer.js"></script>
<script src="_content/AngryMonkey.CloudComponents.VideoPlayer/progressbar.js"></script>

Components at a glance

Basics (`AngryMonkey.CloudComponents`)

Component	Minimum usage
`PopupComp`	`<PopupComp @ref="_p" Title="Hello"><p>Body</p></PopupComp>` then `await _p.Open()`
`Dialog`	`<Dialog @ref="_d" Title="Confirm" Buttons="@_btns">Message</Dialog>`
`Switch`	`<Switch Value="@_val" ValueChanged="OnChanged" AllowNone="true" DisplayText="true" />`
`Tabs`	`<Tabs TabsList="@_tabs" />` where `_tabs` is a `List<TabItem>`
`ProgressBar`	`<ProgressBar Style="ProgressBarStyle.Flat" Value="@_v" Total="100" OnChanged="OnChanged" />`
`VolumeBar`	`<VolumeBar Value="@_vol" Extended="true" OnChanged="OnChanged" />`
`CloudMarkdown`	`<CloudMarkdown SourceUrl="@readmeUrl" DocumentRoute="/docs" />`

CloudMarkdown

CloudMarkdown renders either a remote .md / .markdown document (SourceUrl) or supplied Markdown (Content) inside isolated documentation styles. It resets surrounding page styles, resolves GitHub README links through DocumentRoutes, preserves external GitHub links, and scrolls local fragments without leaving #... in the address bar. Register builder.Services.AddHttpClient() in the host app before loading remote documents. Theme overrides can be passed through Style with component-local variables such as --cloud-markdown-link, --cloud-markdown-surface, and --cloud-markdown-font-size. Raw HTML is intentionally disabled for safe remote rendering.

CloudGrid (`AngryMonkey.CloudComponents.DataGrid`)

<CloudGrid TItem="MyModel" DataProvider="LoadData" Columns="@_columns" />

DataProvider — async callback for server-driven load, sort, and page
CloudGridHeaderOptions — adds search, refresh, export toolbar
Paging modes: None, LoadMore, Pager
Row actions, bulk selection, column reordering, drag-and-drop row reordering

See CloudComponents.DataGrid/README.md for the full API.

VideoPlayer (`AngryMonkey.CloudComponents.VideoPlayer`)

<VideoPlayer Metadata="@_metadata" />

Build VideoPlayerMetadata to configure source URL, type (MP4 / HLS), controls, volume, loop, aspect ratio, and captions. See CloudComponents.VideoPlayer/README.md for all options.

AzureMap (`AngryMonkey.CloudComponents.Maps`)

<AzureMap @ref="_map" Options="@_options" OnMapReady="OnMapReady" />

builder.Services.AddAzureMaps(options => options.SubscriptionKey = "YOUR_AZURE_MAPS_KEY");

Features: markers, regions, polygon boundaries, geocoding, reverse geocoding, place search, pin-my-location, location lock, camera and style updates at runtime. See CloudComponents.Maps/README.md for the full API.

CloudEditor (`AngryMonkey.CloudComponents.TextEditor`)

<CloudEditor @bind-Value="_html" Placeholder="Start writing…" FirstHeadingLevel="2" />

Rich text editor with headings, bold/italic/strikethrough, colors, alignment, lists, links, image/video insertion, fullscreen mode, and HTML code view with validation. See CloudComponents.TextEditor/README.md for the full API.

CloudIcons (`AngryMonkey.CloudComponents.Icons`)

<PlayIcon />  <PauseIcon />  <SearchIcon />  <GoogleLogo />  <MicrosoftLogo />

SVG icon and logo Razor components — no extra CSS class or import required.

Repository structure

CloudComponents/
+-- CloudComponents.Basic/         # Core UI primitives package
+-- CloudComponents.DataGrid/          # Data grid library
+-- CloudComponents.VideoPlayer/   # Video player library
+-- CloudComponents.Maps/          # Azure Maps library
+-- CloudComponents.Maps.Web/      # Maps web helpers
+-- CloudComponents.TextEditor/        # Rich text editor library
+-- CloudComponents.Icons/         # SVG icon components
+-- CloudComponents.Demo/          # Unified demo app (deployed to GitHub Pages)
+-- archived/                      # Legacy standalone demo projects (reference only)

Contributing

Pull requests are welcome. For larger changes please open an issue first to discuss the approach.

License

MIT