Controls | Getting Started
A rich, ready-to-use UI controls library for both .NET MAUI and Blazor. One package per host covers TableView, Scheduler, FloatingPanel, ShinyDurationPicker, Fab/FabMenu, PillView, SecurityPin, SignaturePad, ImageViewer, ImageEditor, ChatView, ColorPicker, FontPicker, ProgressBar, GradientSlider, Overlay/LoadingOverlay, AutoCompleteEntry, CountryPicker, AddressEntry, and TextEntry. Markdown, Mermaid Diagrams, and Speech Add-ins are available as separate add-on packages for each host.
| GitHub |  |
| MAUI |  |
| Blazor |  |
| MAUI Markdown |  |
| Blazor Markdown |  |
| MAUI Mermaid Diagrams |  |
| Blazor Mermaid Diagrams |  |
| MAUI Speech Add-ins |  |
| Blazor Speech Add-ins |  |
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 |
| FloatingPanel | Draggable floating panel overlay (bottom, bottom with tabs, or top) with configurable detents, OverlayHost backdrop management, header peek, keyboard handling, and ShinyContentPage convenience base class |
| ShinyDurationPicker | Standalone duration picker control that opens a FloatingPanel with hour/minute selection, min/max constraints, and configurable intervals |
| 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 |
| ImageEditor | Inline image editor with crop, rotate, draw, line/arrow, text annotations with font selection, undo/redo, and export to PNG/JPEG/WEBP |
| FontPicker | Font family and font size picker controls with inline list and popup button variants, each font rendered in its own typeface |
| ChatView | Modern chat UI with message bubbles, typing indicators, per-participant colors/avatars, load-more, and input bar |
| ColorPicker | Full-featured color picker with spectrum view, hue bar, opacity slider, hex input, and preview swatch |
| AutoCompleteEntry | Text input with debounced search, dropdown suggestions, busy indicator, and custom item templates |
| CountryPicker | Country search with flag emoji, name, and dial code from full ISO 3166-1 list |
| AddressEntry | Address search with geocoding (Nominatim by default) and structured address results |
| TextEntry | Material Design-inspired text entry with animated floating placeholder, customizable border, tool slots, validation hints, and character count |
| SignaturePad | Signature capture with canvas drawing, PNG export, and configurable panel overlay (requires OverlayHost or ShinyContentPage on MAUI) |
| ProgressBar | Progress bar with gradient fill, Vista-style shimmer pulse, determinate/indeterminate modes, and text overlay |
| GradientSlider | Slider with two-color gradient track, blended thumb, tooltip, and full drag/tap interaction |
| Overlay & LoadingOverlay | Full-screen overlay with configurable backdrop, custom content template, and built-in loading mode (spinner or progress bar) |
| 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) |
Speech Add-ins
Section titled “Speech Add-ins”Speech add-ins are available as separate packages (Shiny.Maui.Controls.SpeechAddins and Shiny.Blazor.Controls.SpeechAddins) that extend controls with voice capabilities.
| Control | Description |
|---|---|
| SpeechToTextTool | Speech recognition tool for the ChatView input bar — listens for voice input and backfills chat messages with configurable auto-send, silence timeout, culture/language selection, and customizable listening appearance |
| TextToSpeechBubbleTool | Text-to-speech tool for ChatView message bubbles — reads message text aloud with configurable speech rate, pitch, volume, voice, and culture |
| TextEntrySpeechToTextTool | Speech recognition tool for any TextEntry control — appends recognized speech to the input field with listening state indicator and customizable appearance |
- 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"For Speech Add-ins (separate package: Shiny.Maui.Controls.SpeechAddins), no additional XML namespace is needed — speech controls use the same shiny namespace as the core controls.
Blazor
Section titled “Blazor”Install Shiny.Blazor.Controls (plus Shiny.Blazor.Controls.Markdown, Shiny.Blazor.Controls.MermaidDiagrams, or Shiny.Blazor.Controls.SpeechAddins 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.Chat@using Shiny.Blazor.Controls.Markdown@using Shiny.Blazor.Controls.MermaidDiagrams@using Shiny.Blazor.Controls.SpeechAddinsNo 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 Step 1 — Add the marketplace:
copilot plugin marketplace add https://github.com/shinyorg/skills Step 2 — Install the plugin:
copilot plugin install shiny-controls@shiny