Controls | Getting Started

A rich, ready-to-use UI controls library for both .NET MAUI and Blazor. One package per host covers TableView, TreeView, Scheduler, FloatingPanel, SheetView, ShinyDurationPicker, Fab/FabMenu, Toolbar/TabBar, PillView, BadgeView, SkeletonView, Toast, SecurityPin, SignaturePad, ImageViewer, ImageEditor, ChatView, ColorPicker, FontPicker, ProgressBar, Slider, Overlay/LoadingOverlay, AutoCompleteEntry, CountryPicker, AddressEntry, TextEntry, CarouselGallery, ParallaxCollectionView, StaggeredGrid, and VirtualizedGrid. Barcodes & QR Codes, CameraView (with pluggable barcode/face/motion/OCR analyzers), Markdown, Mermaid Diagrams, and Speech Add-ins are available as separate add-on packages for each host, plus desktop add-ons (Tray Icon, Docking, On-Screen Keyboard).

GitHub
MAUI
Blazor
MAUI Barcodes
Blazor Barcodes
MAUI Camera
Blazor Camera
MAUI Markdown
Blazor Markdown
MAUI Mermaid Diagrams
Blazor Mermaid Diagrams
MAUI Speech Add-ins
Blazor Speech Add-ins

Frameworks

.NET MAUI

Blazor

Controls

Control	Description
TableView	Settings-style table with 14 cell types, cascading styles, drag-to-sort, sections, and full MVVM support
TreeView	Hierarchical tree with lazy loading, configurable expand/collapse icons, single/multi-selection, CanExpand/CanSelect predicates, drag/drop reorder, and Blazor keyboard navigation
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
Slider	Slider with a cold-to-hot two-color gradient track, blended thumb, tooltip, and full drag/tap interaction
SkeletonView	Content-wrapping skeleton loader with animated shimmer placeholders for loading states
BadgeView	Content-wrapping corner badge with text, dot, count overflow, and pulse animation
Toast	Service-based toast notifications with auto-dismiss, stacking, spinner, progress bar, and full styling
Feedback Service	Extensible feedback service — haptic, audio, text-to-speech, or any custom response to control events (MAUI)
Overlay & LoadingOverlay	Full-screen overlay with configurable backdrop, custom content template, and built-in loading mode (spinner or progress bar)
SheetView	Draggable sheet overlay (bottom or top) with configurable snap points — the Blazor equivalent of MAUI’s FloatingPanel (Blazor only)
Toolbar & TabBar	Screen-docked navigation chrome — a docked action toolbar and a mobile-style tab bar, both with a frosted-glass option and scroll-under behavior (Blazor only)
CarouselGallery	Netflix-style horizontal carousel with snap-to-center, scale transforms, peek insets, and position tracking
ParallaxCollectionView	CollectionView with a hero header that translates (and optionally collapses or fades) at a configurable fraction of the scroll offset
StaggeredGrid	Pinterest-style masonry/waterfall layout with variable-height items in configurable columns
VirtualizedGrid	Full-featured grouped grid with sticky headers, virtualization, orientation-aware columns, and load-more
CameraView	Cross-platform camera preview with zoom, torch, lens selection, photo + video capture, live filters, and a pluggable frame-analysis pipeline — barcode, face, motion, and OCR analyzers (separate package)
Barcodes & QR Codes	Pure-managed 1D and 2D barcode + QR code rendering (separate package)
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)
Tray Icon	Cross-platform system tray / status-bar / menu-bar icon for MAUI desktop apps — Windows, macOS AppKit, MacCatalyst, and Linux. Context menus with per-item icons and OS-dispatched keyboard accelerators, click events, tooltips, badges, OS notifications, animated icons, dynamic visibility (ships in the Shiny.Maui.Controls.Desktop add-on, MAUI desktop only)
Docking	Visual-Studio-style window docking for MAUI desktop and Blazor — dockable tool windows, tabbed groups, splitters, auto-hide rails, and tear-off floating windows on Windows / macOS AppKit / Linux GTK. Layout schema with JSON round-trip + forward-only migrations, IDockHost per-window controller, IDockableContentFactory panel registration by stable ID (MAUI: Shiny.Maui.Controls.Desktop package; Blazor: Shiny.Blazor.Controls.Kiosk package, namespace Shiny.Blazor.Controls.Kiosk.Docking — kiosk-shaped Blazor add-on combining docking and a forthcoming on-screen keyboard)
On-Screen Keyboard	Touch / kiosk on-screen keyboard for MAUI desktop and Blazor — US-QWERTY with shift / numbers / symbols layers, bottom-docked auto-show on focus, dispatches into the focused Entry / Editor (MAUI) or <input> / <textarea> (Blazor) without stealing focus. Full AutomationPeer / ARIA tree for switch-input accessibility. Ships in Shiny.Maui.Controls.Desktop and Shiny.Blazor.Controls.Kiosk

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

Setup

MAUIBlazor

• NuGet Packages
• Project File
• MauiProgram.cs

Shiny.Maui.Controls

.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

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.SpeechAddins

No DI registration is required — drop the components into any .razor page.

AI Skill

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install controls@shiny

View controls Plugin