Controls | Getting Started

A rich, ready-to-use UI controls library for both .NET MAUI and Blazor. One package per host covers TableView, DataGrid, TreeView, Scheduler, FloatingPanel, SheetView, DurationPicker, Fab/FabMenu, Toolbar/TabBar, PillView, BadgeView, SkeletonView, Toast, Dialogs, SecurityPin, SignaturePad, ImageViewer, ImageEditor, ChatView, ColorPicker, FontPicker, ProgressBar, Slider, Overlay/LoadingOverlay, AutoCompleteEntry, CountryPicker, AddressEntry, TextEntry, CarouselGallery, Carousel, ParallaxCollectionView, StaggeredGrid, VirtualizedGrid, and StateView/Wizard. Barcodes & QR Codes, CameraView (with pluggable effects and barcode/face/motion/OCR/document/AI analyzers), Markdown, Mermaid Diagrams, and Speech Add-ins are available as separate add-on packages for each host, plus Keyframe Animation (MAUI-only declarative XAML timelines with seekable, reversible playback) and 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
MAUI Keyframe
MAUI Keyframe Export

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
DataGrid	Feature-rich data grid modeled on MudBlazor — typed columns, sorting, filtering, grouping, aggregates, selection, inline editing, paging, virtualization, and column resize/reorder. A pure cross-platform composite on MAUI (no native handlers) and a generic DataGrid<TItem> rendering semantic HTML on Blazor
TreeDataGrid	The DataGrid in hierarchy mode — rows nest from a ChildrenSelector with the indent and caret carried by the first column, optional lazy loading per level, and every other grid feature (sorting, filtering, frozen columns, selection, editing, aggregates) working unchanged
TreeView	Hierarchical tree with lazy loading, configurable expand/collapse icons, single/multi-selection, CanExpand/CanSelect predicates, drag/drop reorder, and Blazor keyboard navigation
Spreadsheet	Open, render and edit real .xlsx workbooks — a virtualized SkiaSharp grid over a document kernel with transactional undo and a formula engine, plus an optional formatting toolbar. Edits are surgical on the OOXML, so untouched content survives a save (separate package)
Document & Slide Viewers	Read-only .docx and .pptx — Word reflowed to the control’s width with the full style chain resolved, PowerPoint scaled as fixed artboards with placeholders inherited from layout and master (separate package)
Document Editor	A .docx editor in two controls — the lone surface, and the same surface plus formatting chrome. Typing, selection, styles, inline shapes/pictures/tables, page margins, headers and footers, and platform spell check on MAUI (separate package)
Slide Editor	A .pptx editor in two controls — click a shape to move or resize it, double-click to put a caret in its text, with the same shape/picture/table galleries the document editor offers (separate package)
Scheduler	Calendar grid, agenda timeline, and event list views with a shared ISchedulerEventProvider interface
Stacks & Grid	VStack, HStack, and a responsive 12-column Grid/Row/Column (Blazor only)
AppLayout	Application shell with a header, footer, and collapsible, drag-resizable left and right panels that keep their own scroll regions and auto-collapse when the shell gets narrow (Blazor only)
Flyout	Side panel that slides in from either edge, rests as a narrow icon rail, and either pushes the content aside or floats over it — a FlyoutPage replacement that also works inside Shell (MAUI only)
TabbedPage	An improved TabbedPage — motion icons, per-tab badges, an animated transition, lazily built content, and a raised centre button that presents the current page’s actions. The same bar drops onto a Shell (MAUI only)
NavigationPage	A real NavigationPage whose drawn bar carries toolbar items on the left as well as the right, plus an overflow menu, badges, motion icons and an iOS-style collapsing large title (MAUI only)
Modal	A modal window — configurable header, close button, content and footer buttons, with opened/closing/closed events, focus trap and scroll lock, plus drag, resize and maximise (Blazor only)
Quick Entry	An assistant-style prompt popup summoned over whatever the user is looking at — an in-app overlay everywhere, or a borderless always-on-top OS window on desktop — plus a Siri-style screen-edge glow
Splash Screen	A customizable boot splash that paints before Blazor starts, driven afterwards by ISplashScreen and SplashScreenHost (Blazor only)
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
DurationPicker	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
PasswordStrength	Password field with a live strength meter, a rule checklist and a Show/Hide toggle. Passphrase-first defaults, and a pluggable async scorer for zxcvbn or a Have I Been Pwned range query
ShinyImage	Image loading with placeholder artwork, a determinate or indeterminate loading ring, error artwork, memory + disk caching with a bounded download queue, and vector SVG rendering on MAUI
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
ProgressLine	The thin loading line across the top or bottom of the window, docked clear of the navigation and tab bars, bound or driven from code
ShinyButton	Button with a real working state, success/error states, and leading/trailing icon slots
RangeSlider	Two-thumb range slider with a cold-to-hot gradient, per-thumb tooltips, and min/max gap constraints
MediaPickerButton	Adds photos from the gallery or camera, compresses and re-encodes to PNG or JPEG, caps the count, and shows them in a carousel or a pinch/zoom overlay
Captcha	A human check in front of a form — one component over four providers: a built-in local challenge needing no account, plus Google reCAPTCHA, hCaptcha and Cloudflare Turnstile (Blazor only)
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
Expander & Accordion	Disclosure panel whose fade, slide and height reveals are flags that combine, aimed at any of the four edges and opening down or up — plus the accordion list that coordinates a stack of them with single/multiple selection and a two-way ExpandedIndex
StateView	Shows one of several named branches from a single string — with fade/slide/scale transitions, a fallback chain, and lazy per-branch content
Wizard	Multi-step flow built on StateView — pointed chevron progress bar, layered per-step validation, conditional steps that leave the run entirely, built-in navigation commands, and a cancellable finish
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
Dialogs	Service-first alert, confirm, and prompt dialogs — always library-rendered (never the native alert), identical across platforms with custom entry/exit animations and full template overrides. Inject IDialogService and await a result
Walkthrough	Guided tour that dims the page and cuts an animated spotlight around one control at a time — steps declared in order, advancing on a command, a tap of the highlighted control, or a timer, with a RememberRunKey so onboarding runs once
Tooltip	Themed tooltip that wraps its target or points at one, auto-flips to whichever side has room, and is drawn above the page so nothing can clip it
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 (MAUI ↔ Blazor parity)
Carousel	Embla-style, transform-based drag carousel for Blazor — alignment, slides-per-view, variable widths, seamless looping, scroll-linked effects, autoplay, and counter / progress / thumbnail chrome (Blazor only)
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 and burn-in video overlays, a pluggable effects pipeline (colour grades, comic/sketch looks, face masks, AI stylization) and a pluggable frame-analysis pipeline — barcode, face, motion, OCR, structured documents, and AI document scanning (separate packages)
MediaElement	Local and remote audio/video with a themed, per-element-toggleable transport bar, background audio with OS lock-screen controls, and Picture-in-Picture (separate package)
Motion Icons	Animated icons that run on a timer, on hover, on tap, when they scroll into view, or on command
FrostedGlassView	Native frosted glass — real-time UIVisualEffectView on Apple, RenderEffect on Android 12+, and backdrop-filter on the web
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)
Keyframe Animation	Declarative keyframe animation — the CSS @keyframes model in XAML plus a fluent C# TimelineBuilder, composable storyboards, and a drawn KeyframeScene layer tree. Evaluation is a pure function of time, so animations seek: scrub from a slider or gesture, reverse mid-flight with a negative rate, and export deterministically. Named easing curves and CSS function syntax (cubic-bezier(...), steps(n), spring(...)), Oklab colour blending, an AOT-safe animatable-property registry, plus an optional headless frame/GIF exporter (separate packages, MAUI only)
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: no add-on — it ships in the main Shiny.Blazor.Controls package, namespace Shiny.Blazor.Controls.Docking)
File Drop	Files dragged from Finder, Explorer or the Files app onto anywhere in the app window — including on top of a BlazorWebView, which MAUI’s own DropGestureRecognizer cannot see (MAUI: Shiny.Maui.Controls.Desktop; Blazor: the main package)
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; on Blazor it lives in the main Shiny.Blazor.Controls package

Theming

Every control above reads from one central, Material 3 style theming system shared by MAUI and Blazor — the token contract, the Basic / Ocean / Material / Terminal / Aurora packs, and the Theme Creator.

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 Keyframe Animation (separate package: Shiny.Maui.Controls.Keyframe):

xmlns:kf="http://shiny.net/maui/keyframe"

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 CodeGitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

Step 1 — Add the marketplace:

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

Step 2 — Install the plugin:

copilot plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

View shiny-controls Skill