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, Avatar/AvatarGroup, SkeletonView, Toast, Dialogs, SecurityPin, SignaturePad, ImageViewer, ImageEditor, ChatView, ColorPicker, FontPicker, ProgressBar, Slider, Overlay/LoadingOverlay, AutoCompleteEntry, CountryPicker, AddressEntry, TextEntry, CarouselGallery, Carousel, CoverFlowView, 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, inside an Excel window — ribbon, title bar, status bar and File backstage — with merge, freeze panes, borders, sort and AutoFilter, conditional formatting, data validation, tables, charts, notes and ~140 functions. Edits are surgical on the OOXML, so untouched content survives a save (separate package)
Document Viewer	Read-only .docx reflowed to the control’s width with the full style chain resolved, lists numbered from numbering.xml, tables and an outline for navigation (separate package)
Slide Viewer	Read-only .pptx scaled as fixed artboards with shapes resolved through slide → layout → master, a thumbnail grid, and a full-screen presenting mode (separate package)
Document Editor	A .docx editor in two controls — the lone surface, and the same surface dressed as Word. Styles, editable tables, find and replace, rich clipboard, hyperlinks, TOC, footnotes, comments, track changes, page setup, PDF export, 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. Shape Format, groups, themes, transitions, animations, charts, media and a slide show with presenter view (separate package)
Office Shell	The Word / Excel / PowerPoint window around the editors — accent title bar with command search, File backstage, ruler, navigation and side panes, status bar with view modes and zoom, focus mode (separate package)
Scheduler	Calendar grid, agenda timeline, and event list views with a shared ISchedulerEventProvider interface
Stacks & Grid Blazor	VStack, HStack, and a responsive 12-column Grid/Row/Column
AppLayout Blazor	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
ShinyFlexLayout MAUI	A fast replacement for FlexLayout with the same API plus row/column gaps. It caches child measurements, so a same-size pass measures nothing and a changed child re-measures only itself
YogaLayout	The layout model of Yoga (React Native’s flexbox engine) on both hosts: absolute insets, percentages, aspect ratio and auto margins. Pure C# on MAUI, CSS on Blazor
Flyout MAUI	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
Foldables	Fold-aware layouts on Android foldables and iPhone Duo: Flyout panels snap to the fold; dialogs, overlays and toasts move off it; panels gain a tabletop detent. A MAUI add-on with built-in posture providers, and CSS viewport segments on Blazor
TabbedPage MAUI	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
NavigationPage MAUI	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
Modal Blazor	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
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
Keyboard Shortcuts	Shortcuts on a page, a view or a dialog — Primary is ⌘/Ctrl per platform, layout-aware matching, chords, repeat, push-to-talk release, modal scopes and a cheat-sheet API
Splash Screen Blazor	A customizable boot splash that paints before Blazor starts, driven afterwards by ISplashScreen and SplashScreenHost
FloatingPanel MAUI	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 MAUI	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
Confetti	Magic UI-style confetti bursts on any tap or click, or from code, with Burst, Random, Fireworks, Side Cannons and Stars presets
Marquee	Endless scrolling content — horizontal, vertical or any angle — with faded edges, reverse, speed and pause on hover
Border Animations	Magic UI-style animated card outlines: BorderBeam (a beam of light travelling round the edge) and ShineBorder (a drifting multi-colour shine)
AnimatedBackground	A container that draws an animated effect behind its content — aurora, particles, snow, rain, meteors, a dot-pattern spotlight, film grain, a starfield, fireflies, bubbles, waves or Matrix rain
VideoText	Magic UI-style text with a looping, muted video playing inside the letters and transparency around them (MediaElement packages)
Range Pickers	Date range, time range and date/time range pickers plus an inline range calendar, with presets, min/max spans, blocked days and overnight times
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 Blazor	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
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
Avatar & AvatarGroup	Picture, then initials, then silhouette, with a presence dot and a stable colour per name; an overlapping facepile that collapses into a +N chip
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 MAUI	Extensible feedback service — haptic, audio, text-to-speech, or any custom response to control events
Overlay & LoadingOverlay	Full-screen overlay with configurable backdrop, custom content template, and built-in loading mode (spinner or progress bar)
SheetView Blazor	Draggable sheet overlay (bottom or top) with configurable snap points — the Blazor equivalent of MAUI’s FloatingPanel
Toolbar & TabBar Blazor	Screen-docked navigation chrome — a docked action toolbar and a mobile-style tab bar, both with a frosted-glass option and scroll-under behavior
CarouselGallery	Netflix-style horizontal carousel with snap-to-center, scale transforms, peek insets, and position tracking (MAUI ↔ Blazor parity)
Carousel Blazor	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
CoverFlowView	Album-art Cover Flow carousel — tilted, stacked side items, drag and flick with momentum, tap to centre, looping, reflections and a caption for the centre item (MAUI ↔ Blazor parity)
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 MAUI	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)
Tray Icon MAUI	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, 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
Gamepad	On-screen game controller — NES, SNES, Xbox/PlayStation, twin-stick and arcade layouts as an overlay or an inline controller, with multi-touch sticks and d-pads, turbo, haptics, a drag-and-pinch layout editor and auto-hide when a real controller connects. It is a real Shiny.Gamepad IGamepad, so game code reads it like hardware (separate packages)

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

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

Changed files

• MyApp/
  • MauiProgram.cs
  • MyApp.csproj

MauiProgram.cs

MauiProgram.csCopy

1#if PLATFORM2using Shiny;3using MyApp.Services;4​5namespace MyApp;6​7public static class MauiProgram8{9    public static MauiApp CreateMauiApp()10    {11        var builder = MauiApp.CreateBuilder();12​13        builder    14            .UseMauiApp<App>()15            .UseShiny()16            .UseShinyControls(cfg =>17            {18                cfg.AddDefaultMauiControlFeedback();19            })20            .ConfigureFonts(fonts =>21            {22                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");23                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");24            });25​26        // TODO: once you have localization, add these27        //builder.Services.AddLocalization();28        //builder.Services.AddStronglyTypedLocalizations();29        builder.Services.AddSingleton(TimeProvider.System);30#if DEBUG31        builder.Logging.SetMinimumLevel(LogLevel.Trace);32        builder.Logging.AddDebug();33#endif34​35        // source generated by Shiny.Extensions.DependencyInjection - registers every class marked [Singleton], [Scoped] or [Transient]36        builder.Services.AddGeneratedServices();37        // builder.Services.AddGeneratedAITools(); // https://shinylib.net/di/ai-tools/38        var app = builder.Build();39​40        return app;41    }42}43#endif

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