Controls | Getting Started
A rich, ready-to-use UI controls library for both .NET MAUI and Blazor. One package per host covers TableView, Scheduler, BottomSheet, Fab/FabMenu, PillView, SecurityPin, and ImageViewer. Markdown and Mermaid Diagrams are available as separate add-on packages for each host.
Controls
Section titled “Controls”| Control | Description |
|---|---|
| TableView | Settings-style table with 14 cell types, cascading styles, drag-to-sort, sections, and full MVVM support |
| Scheduler | Calendar grid, agenda timeline, and event list views with a shared ISchedulerEventProvider interface |
| BottomSheet | Draggable bottom sheet overlay with configurable snap points (detents), backdrop, and keyboard handling |
| Fab & FabMenu | Material-style floating action button and expanding multi-action menu with staggered animations, backdrop, and full color customization |
| PillView | Status badge/label with 6 preset themes, custom colors, and WCAG-accessible contrast |
| SecurityPin | PIN entry with individually rendered cells, optional character masking, and full styling control |
| ImageViewer | Full-screen image overlay with pinch-to-zoom, pan, double-tap zoom, and animated transitions |
| Markdown | Read-only markdown renderer and full editor with formatting toolbar and live preview (separate package) |
| Mermaid Diagrams | Native Mermaid flowchart rendering with Sugiyama layout, themes, and pan/zoom (separate package) |
- NuGet Packages
- Project File
- MauiProgram.cs
Shiny.Maui.Controls
.NET MAUI
Section titled “.NET MAUI”Add the XAML namespace to your pages:
xmlns:shiny="http://shiny.net/maui/controls"For Markdown controls (separate package: Shiny.Maui.Controls.Markdown):
xmlns:md="http://shiny.net/maui/markdown"For Mermaid Diagrams (separate package: Shiny.Maui.Controls.MermaidDiagrams):
xmlns:diagram="http://shiny.net/maui/diagrams"Blazor
Section titled “Blazor”Install Shiny.Blazor.Controls (plus Shiny.Blazor.Controls.Markdown or Shiny.Blazor.Controls.MermaidDiagrams as needed) and add the @using directives — typically in _Imports.razor:
@using Shiny.Blazor.Controls@using Shiny.Blazor.Controls.Cells@using Shiny.Blazor.Controls.Sections@using Shiny.Blazor.Controls.Scheduler@using Shiny.Blazor.Controls.Markdown@using Shiny.Blazor.Controls.MermaidDiagramsNo DI registration is required — drop the components into any .razor page.
AI Skill
Section titled “AI Skill”Step 1 — Add the marketplace:
claude plugin marketplace add shinyorg/skills Step 2 — Install the plugin:
claude plugin install shiny-controls@shiny Coming soon — Copilot plugin install instructions will be added here.