# Shiny Controls
A rich, ready-to-use UI controls library for both **.NET MAUI** and **Blazor**. One package per host covers TableView, DataGrid (with detail/breakdown rows and a TreeDataGrid hierarchy mode), TreeView, Scheduler, FloatingPanel/OverlayHost, DurationPicker, date range / time range / date-time range pickers (an inline range calendar plus field-and-popup pickers with presets, min/max spans, blocked dates and overnight time ranges, over the shared `Shiny.Controls.RangePickers.Shared` engine), FrostedGlassView, Toast, Dialogs (owned, animated alert/confirm/prompt/action-sheet), Fab/FabMenu, ShinyToolbar/ShinyTabBar (Blazor), SplashScreen (Blazor), PillView, BadgeView, Avatar/AvatarGroup (picture, initials or silhouette with a presence dot, and an overlapping facepile with a +N overflow), ButtonGroup (related buttons joined into one segmented control, with optional single or multiple selection), TagEntry (free-text tags committed as removable chips), ChipGroup (a bound set of chips, selectable singly or in any number, whose selection is the items themselves rather than an index), SecurityPin, PasswordStrength (a password field with a live strength meter, a rule checklist and a pluggable scorer), Captcha (Blazor โ one component over a built-in local challenge plus reCAPTCHA, hCaptcha and Turnstile), SignaturePad, ShinyImage, ImageViewer, ImageEditor, MediaPickerButton, ChatView, ColorPicker, FontPicker, Slider, ProgressBar (with an animated, bidirectional fill), Gauge (a speedometer / tachometer dial whose needle accelerates, carries its momentum, overshoots and settles like a real instrument's, with coloured ranges, peak hold and an ignition sweep, over the shared `Shiny.Controls.Gauge.Shared` engine), ProgressLine (the thin page-edge loading line, docked clear of the nav and tab bars and drivable from code), Overlay/LoadingOverlay, SkeletonView, Expander/Accordion (a disclosure panel whose fade, slide and height reveals combine and are aimed at any of the four edges, and the accordion list that coordinates a stack of them), AutoCompleteEntry, CountryPicker, AddressEntry, TextEntry, CarouselGallery, CoverFlowView (an album-art Cover Flow carousel with tilted, stacked side covers and reflections), ParallaxCollectionView, StaggeredGrid, VirtualizedGrid, and StateView/Wizard (named branches switched by one string, and a multi-step flow built on them with a pointed progress bar, per-step validity gates and conditional steps), a **GanttView** โ a project timeline with a task grid beside it, hierarchy with rolled-up summary bars, milestones, baselines, deadlines, typed dependency arrows with lag, working-time calendars, constraints, drag to move/resize/set progress with the successors following, and a critical path, whose whole scheduling engine (`Shiny.Controls.Gantt.Shared`) is shared verbatim between the two hosts โ plus a **TimelineView** โ a vertical rail of markers with arbitrary, self-sizing content beside each one, an active position (or all-active) driving which part of the rail is filled, and optional content on the far side of the rail. Walkthrough and Tooltip round that out: a guided tour that dims the page and cuts an animated spotlight around one control at a time โ steps declared together in order, advancing on a command, on a tap of the highlighted control, or on a timer, with a RememberRunKey so onboarding runs once โ and the themed tooltip bubble underneath it, which 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. A **Flyout** โ a side panel that slides in from either edge, rests as a narrow icon rail instead of a full panel, and either pushes the content aside or floats over it โ replaces MAUI's `FlyoutPage` and, unlike it, works inside Shell. On MAUI there is also a **`ShinyNavigationPage`** โ a real `NavigationPage`, with everything that implies, whose drawn bar carries toolbar items on the **left** as well as the right, plus an overflow menu, badges and an iOS-style collapsing large title. Blazor additionally gets layout primitives โ `VStack`/`HStack`, a responsive `Grid`/`Row`/`Column`, and an `AppLayout` application shell whose left/right panels collapse to hidden, a toolbar rail or fully shown, drag-resize between a min and max, keep their own scroll regions, and can persist and auto-collapse when the shell gets narrow. **BorderBeam** and **ShineBorder** โ animated card outlines with a beam that travels round the edge or a drifting multi-colour shine โ **AnimatedBackground** (a container that draws aurora, particles, snow, rain, meteors, a dot-pattern spotlight, film grain, a starfield, fireflies, bubbles, waves or Matrix rain behind its content), and Motion Icons โ 111 animated icons that run on a timer, on hover, on tap or on command โ ship in the core packages on both hosts, as does an Office-style **Ribbon** (tabs over titled command groups, with contextual tabs, split and menu buttons, a quick access row, a collapsing body, groups that fold into buttons when the window narrows, and a Simplified one-row mode for phones โ which is what the ImageEditor's toolbar is built from). Sliders come in single-value (Slider) and two-thumb range (RangeSlider) flavors. Markdown, Mermaid Diagrams, Barcodes (1D + 2D, QR codes), Keyframe animation (declarative XAML timelines with seekable, reversible playback), and a cross-platform CameraView (preview, photo/video capture, live JPEG/H.264 video for calls with a `RemoteVideoView` to draw the other side (MAUI), a pluggable effects pipeline for colour/comic/sketch/blur looks, face masks and AI stylization, plus a pluggable frame-analysis pipeline for barcode/face/motion/OCR/structured-documents โ and, on MAUI, an injectable **IMediaService** that drives all of it from a modal camera page of Shiny's own: permissions, compression, gallery picking, and one-line `ScanBarcodeAsync`/`ScanCreditCardAsync`/`ScanTextAsync` verbs contributed by the analyzer add-ons, plus a **long-range barcode mode** (`BarcodeAnalyzer Mode="LongRange"`, over the dependency-free `Shiny.Controls.BarcodeReader.Shared` engine) that locates codes before decoding them, reads 1D codes down to about a pixel per module with a blur-tolerant managed decoder, hands 2D codes to Vision / ML Kit as enlarged crops, and can zoom the camera in on a code too small to read) ship as separate add-on packages per host, Office viewers and editors โ a Spreadsheet (`SpreadsheetView`) that opens, renders and edits real `.xlsx` workbooks, with an optional formatting toolbar carrying the usual bold/italic/colour controls plus the spreadsheet-only ones: cell fill, number formats, decimal places, whole-column formatting and AutoSum, a `.docx` editor in two controls โ `DocumentEditor` (the lone surface) and `DocumentEditorView` (the same plus formatting chrome), with spell check drawn from the platform's own dictionary on MAUI and replaceable on both hosts โ a `.pptx` editor in two more โ `SlideEditor` and `SlideEditorView` โ where a click selects a shape to move or resize, a double-click puts a caret in its text, and a Slide show button plays the deck full screen from the slide being edited, both editors sharing one gallery of twenty preset shapes plus tables, pictures and text highlighting, and both accepting an image dragged in from the desktop, a OneNote-style free-form **Notebook** in two more โ `NotebookEditor` and `NotebookEditorView` โ an unbounded scrolling page you can write anywhere on, draw over with a pressure-sensitive pen, highlighter, point-or-stroke eraser and lasso, and fill with the same shapes, pictures and rich text as the other editors, organised into sections and pages and saved to a `.shinynote` zip, plus read-only `DocumentView` (`.docx`, reflowed rather than paginated) and `SlideView` (`.pptx`, fitted artboards or a thumbnail grid, with placeholders resolved through layout and master, plus a full-screen presenting mode with speaker notes) โ a virtualized SkiaSharp grid shared verbatim by both hosts, over a document kernel with a transactional undo stack and a formula engine, editing the OOXML package surgically so an untouched workbook saves byte-identical โ and a cross-platform MediaElement (local + remote audio/video with a themed, per-element-toggleable transport bar, background audio with OS lock-screen controls, and Picture-in-Picture) ship as separate add-on packages per host. A **FloorPlanView** does the same for floor plans โ rooms, walls, doors, cubicles, outlets, furniture and custom SVG stencils on a pan-and-zoom SkiaSharp surface, with drawing and placement tools, snap-to-grid, and selection with resize handles in edit mode; flip it to view mode and it becomes a seating chart where dragging pans and a tap tells you who sits at a desk. Its engine (`Shiny.Controls.FloorPlan.Shared`) is shared verbatim between the two hosts, and ships as its own add-on package per host so that SkiaSharp stays out of the core ones. A **DiagramView** covers the other kind of drawing โ hierarchies, decision trees, flowcharts and mindmaps as a bindable graph of shapes and connections, with tidy tree, layered (Sugiyama), mindmap, radial and force-directed auto-layout, connectors that anchor to the real outline of a diamond or a hexagon rather than to its bounding box, and a surface you can pan, zoom, marquee-select, drag nodes on and author connections in, every edit arriving as a cancellable, revertable plan. Its engine (`Shiny.Controls.Diagram.Shared`) is shared verbatim between the two hosts and is dependency-free, so the layouts and the routing are usable with no UI at all; the controls ship as their own add-on package per host. An on-screen **GamepadView** turns a phone or a mobile browser into a game controller โ NES, Super Nintendo, Xbox/PlayStation, twin-stick and arcade layouts laid over a game with touch pass-through, or placed inline โ and is itself a [Shiny.Gamepad](https://www.nuget.org/packages/Shiny.Gamepad) `IGamepad`, so a game reads it exactly as it reads a physical controller; it ships as `Shiny.Maui.Controls.Gamepad` / `Shiny.Blazor.Controls.Gamepad` over the shared `Shiny.Controls.Gamepad.Shared` engine. Quick Entry โ an assistant-style prompt popup (`PromptView`) summoned over whatever the user is looking at, with an optional Siri-style screen-edge glow โ ships in the **core** packages on both hosts and works everywhere as an in-app overlay; on desktop it can instead open as a borderless always-on-top OS window over *other applications*, which is what the `Shiny.Maui.Controls.Desktop` add-on adds. **Keyboard shortcuts** โ declared in XAML or markup on a page, a view or a dialog (`Primary+S`, `F5`, `?`, chords like `Ctrl+K, Ctrl+C`, push-to-talk keys that report their release), with โ/Ctrl resolved per platform, layout-aware matching, a text-field rule, modal scopes and a cheat-sheet API โ also ship in the core packages on both hosts over the shared `Shiny.Controls.Keyboard.Shared` engine; core listens on Windows, Android and iOS hardware keyboards, and the Desktop add-on supplies the AppKit, GTK4 and Mac Catalyst key sources. That add-on also carries the **desktop-only** system tray / status-bar icon, Visual-Studio-style docking, global hotkeys (Windows, macOS AppKit, MacCatalyst, and Linux), and **window-level file drop** โ files dragged from Finder / Explorer onto anywhere in the app window, including on top of a `BlazorWebView`, which MAUI's own `DropGestureRecognizer` cannot see; Blazor has the same service over the whole browser window in its core package. On the web there is no separate add-on: Blazor docking and the touch / kiosk on-screen keyboard both ship in the main `Shiny.Blazor.Controls` package. **Foldables** โ on a Pixel Fold or other Android foldable, or an iPhone Duo, the Flyout snaps its panel to the fold, dialogs, overlays, toasts and the image viewer move off it, a FloatingPanel gains a tabletop detent, and the Gantt, DataGrid, dock splitters, carousels, Walkthrough and tab bar keep clear of the hinge โ is built into the core MAUI controls behind a posture seam and switched on by the `Shiny.Maui.Controls.Foldables` add-on (Jetpack WindowManager on Android, `UIHinge` on iOS 27.1); Blazor gets the same through CSS viewport-segment media queries in the core package.
[](https://www.nuget.org/packages/Shiny.Maui.Controls)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Markdown)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Markdown)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.MermaidDiagrams)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.MermaidDiagrams)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Barcodes)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Barcodes)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Camera)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Camera)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Camera.Ai)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Camera.Ai)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Camera.Barcode)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Camera.Documents)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Camera.Face)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Camera.Motion)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Camera.Ocr)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Keyframe)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.MediaElement)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.MediaElement.Linux)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.MediaElement)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Office)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Office)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.FloorPlan)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.FloorPlan)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Diagram)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Diagram)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Gamepad)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Gamepad)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Desktop)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Foldables)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.SpeechAddins)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.SpeechAddins)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Keyframe.Export)
[](https://www.nuget.org/packages/Shiny.Controls.MotionIcons.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.Gantt.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.FloorPlan.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.Keyboard.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.Diagram.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.RangePickers.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.Gamepad.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.BarcodeReader.Shared)
[](https://www.nuget.org/packages/Shiny.Controls.Gauge.Shared)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Themes.Terminal)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Themes.Terminal)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Themes.Aurora)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Themes.Aurora)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Themes.Material)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Themes.Material)
[](https://www.nuget.org/packages/Shiny.Maui.Controls.Themes.Ocean)
[](https://www.nuget.org/packages/Shiny.Blazor.Controls.Themes.Ocean)
> โญ **Using Shiny Controls, or about to file a bug or feature request? Please give the repo a [Star](https://github.com/shinyorg/controls).** It costs nothing and it's how the project gets seen. Then head to [Issues](https://github.com/shinyorg/controls/issues/new/choose).
## Getting Started
### .NET MAUI
```bash
dotnet add package Shiny.Maui.Controls
```
Register in your `MauiProgram.cs`:
```csharp
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseShinyControls();
```
Add the XAML namespace:
```xml
xmlns:shiny="http://shiny.net/maui/controls"
```
For Markdown controls (separate package):
```bash
dotnet add package Shiny.Maui.Controls.Markdown
```
```xml
xmlns:md="http://shiny.net/maui/markdown"
```
For Mermaid Diagrams (separate package):
```bash
dotnet add package Shiny.Maui.Controls.MermaidDiagrams
```
```xml
xmlns:diagram="http://shiny.net/maui/diagrams"
```
For Barcodes & QR codes (separate package):
```bash
dotnet add package Shiny.Maui.Controls.Barcodes
```
```xml
xmlns:bc="http://shiny.net/maui/barcodes"
```
```xml
<bc:QRCodeView Value="https://shinylib.net" Size="300" />
<bc:BarcodeView Value="5901234123457" Format="Ean13" />
```
Supported formats: QR Code, Aztec, Data Matrix, PDF417, Code 128/39/93, Codabar, EAN-8/13, UPC-A/E, ITF. Output is rendered as PNG via a pure-managed encoder (no SkiaSharp / System.Drawing dependency). Need an SVG string? Call `BarcodeRenderer.RenderSvg(...)` directly.
For Keyframe animation (separate package):
```bash
dotnet add package Shiny.Maui.Controls.Keyframe
```
```xml
xmlns:kf="http://shiny.net/maui/keyframe"
```
For the CameraView (separate package โ iOS, Android, Windows, macOS AppKit, Blazor):
```bash
dotnet add package Shiny.Maui.Controls.Camera
```
```csharp
builder
.UseShinyControls()
.UseShinyCamera();
```
```xml
xmlns:cam="http://shiny.net/maui/camera"
```
```xml
<cam:CameraView Facing="Back" Filter="None" />
```
The same package registers **`IMediaService`** โ inject it for permissions, photo/video capture through a
modal `CameraView` page, gallery picking, and (with the analyzer add-ons) `ScanBarcodeAsync`,
`ScanCreditCardAsync`, `ScanTextAsync` and the rest. See [IMediaService](docs/controls/media-service.md).
```csharp
var code = await media.ScanBarcodeAsync();
var photo = await media.TakePhotoAsync(new PhotoCaptureOptions { CompressionQuality = 80 });
```
For the MediaElement (separate package โ iOS, Android, Windows, macOS AppKit, Linux GTK4, Blazor):
```bash
dotnet add package Shiny.Maui.Controls.MediaElement
```
```csharp
builder
.UseShinyControls()
.UseShinyMediaElement();
```
```xml
xmlns:media="http://shiny.net/maui/media"
```
```xml
<media:MediaElement Source="https://example.com/clip.mp4" AutoPlay="True" />
```
The full feature set โ effects, analyzers, recording, orientation, AI โ is in [CameraView](docs/controls/camera.md).
### Blazor
```bash
dotnet add package Shiny.Blazor.Controls
dotnet add package Shiny.Blazor.Controls.Markdown # optional
dotnet add package Shiny.Blazor.Controls.MermaidDiagrams # optional
dotnet add package Shiny.Blazor.Controls.Barcodes # optional
```
Add the `@using` directives โ typically in `_Imports.razor`:
```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.MermaidDiagrams
@using Shiny.Blazor.Controls.Barcodes
@using Shiny.Controls.Barcodes
```
Most controls need no DI registration at all โ drop the component into any `.razor` page and its
scoped CSS and JS module come along with it. A handful are driven by a service (Toast, Dialogs, the
splash screen, the walkthrough store, Docking and the on-screen keyboard), and one call covers all
of them, mirroring MAUI's `UseShinyControls()`:
```csharp
using Shiny.Blazor.Controls;
builder.Services.AddShinyControls();
```
With optional configuration, again shaped like the MAUI side:
```csharp
builder.Services.AddShinyControls(cfg => cfg
.ConfigureDialogs(o => o.DefaultAnimation = DialogAnimation.Zoom)
.ConfigureKeyboard(o => o.HeightPx = 320)
.UseHttpImageDownloader() // ShinyImage through your HttpClient (optional)
.AddDockPanel<ExplorerPanel>("explorer", "Explorer", "๐")
);
```
Every individual `AddShinyToast()` / `AddShinyDialogs()` / `AddShinySplashScreen()` /
`AddShinyWalkthrough()` / `AddShinyDocking()` / `AddShinyOnScreenKeyboard()` call still exists, and
all registrations are `TryAdd`, so the two styles compose in either order. Register ร la carte when
you want to keep the WASM payload tight; to replace an implementation, use a `SetCustom*` method or
register your own first โ first registration wins.
> All of these services are **scoped**, not singleton: they hold per-user UI state. Under WebAssembly
> the two lifetimes are identical, but on Blazor Server a singleton would show one user's toast,
> dialog or keyboard to every connected user.
#### MAUI โ Blazor quick reference
| MAUI (XAML) | Blazor (Razor) |
|---|---|
| `<shiny:TableView>` with `<shiny:TableRoot>` | `<TableView>` (no `TableRoot` wrapper) |
| `<shiny:TreeView>` โ `ExpandedIcon`/`CollapsedIcon` are `ImageSource` | `<TreeView TItem="โฆ">` โ icons are `RenderFragment` slots; adds keyboard navigation |
| `<shiny:PillView>` | `<Pill>` |
| `<shiny:BadgeView Text="โฆ">` (wraps `Content`) | `<BadgeView Text="โฆ">` (wraps `ChildContent`) |
| `<shiny:AvatarGroup ItemsSource="โฆ">` or inline `shiny:Avatar` children | `<AvatarGroup>` with `<Avatar>` children (`@foreach`) |
| `<shiny:FloatingPanel>` in `<shiny:OverlayHost>` | `<SheetView>` with `<SheetContent>` child (Blazor uses CSS overlay) |
| `Value="{Binding Pin}"` (TwoWay) | `@bind-Value="pin"` |
| `IsOpen="{Binding IsOpen, Mode=TwoWay}"` | `@bind-IsOpen="isOpen"` |
| `Command="{Binding DoCommand}"` | `OnClick="DoAsync"` / `Clicked="DoAsync"` |
| `Color` type (e.g. `Colors.Blue`) | CSS color string (e.g. `"#2196F3"`) |
| `Fab.Icon="add.png"` (ImageSource) | `<Fab Icon="+">` (inline text/SVG string) |
| `shiny:CarouselGallery` | `<CarouselGallery>` โ `PeekAreaInsets` โ `PeekAmount`; adds `ShowIndicators` |
| `shiny:CoverFlowView ItemsSource="โฆ"` | `<CoverFlowView TItem="โฆ" Items="โฆ">` โ `Next()`/`GoTo()` โ `NextAsync()`/`GoToAsync()`; commands โ `ItemSelected`/`CurrentPositionChanged`; adds `Perspective` and keyboard |
| `shiny:ParallaxCollectionView` | `<ParallaxList>` โ `HeaderTemplate` โ `HeroTemplate`; Blazor uses a JS scroll listener for the transform |
| `shiny:StaggeredGrid` | `<StaggeredGrid>` โ `ItemSelectedCommand` โ `ItemSelected` EventCallback |
| `shiny:VirtualizedGrid` | `<VirtualizedGrid>` โ `CellPadding` โ individual padding props; adds `EnableVirtualization`, `GroupedItems` |
| `ItemTemplate` as `DataTemplate` | `ItemTemplate` as `RenderFragment<object>` |
| `IToaster.ShowAsync(text, cfg => {})` (DI) | `IToastService.ShowAsync(text, cfg => {})` (DI + `<ToastHost />`) |
| `IDialogService.Confirm(...)` (DI; auto-attaches) | `IDialogService.Confirm(...)` (DI + `<DialogHost />`) |
| `<shiny:DataGrid>` + `<shiny:DataGridColumn PropertyName="..."/>` (items as `object`) | `<DataGrid TItem="T">` + `<PropertyColumn Property="x => x..."/>` (generic, `RenderFragment` templates) |
| `<shiny:TextEntry>` | `<TextEntry>` |
| `<shiny:Overlay>` in `<shiny:ShinyContentPage.Panels>` | `<Overlay>` (wraps ChildContent; custom content in `<OverlayContent>` slot) |
| `<shiny:LoadingOverlay>` in `<shiny:ShinyContentPage.Panels>` | `<LoadingOverlay>` (wraps ChildContent) |
| `<shiny:ProgressBar>` | `<ProgressBar>` |
| `<shiny:ProgressLine>` | `<ProgressLine>` + `<ProgressLineHost>` |
| `<shiny:Gauge>` + `<shiny:GaugeRange>` | `<Gauge Ranges="...">` (`GaugeRange` records; needle animated by `gauge.js`) |
| `<MauiSplashScreen>` (native, build-time) | `SplashScreen` โ `index.html` markup + `splash.js`, driven by `ISplashScreen` / `<SplashScreenHost />` |
`ISchedulerEventProvider` is identical across both hosts.
## Controls
Every control has its own page under **[`docs/controls/`](docs/controls)**. Start with
**[Styling & theming](docs/controls/styling.md)** โ implicit styles, what a theme pack changes beyond
colour, and why appearance properties default to `-1` rather than a real value.
### Office
| Control | |
|---|---|
| **[Spreadsheet](docs/controls/spreadsheet.md)** | Open, render and edit real `.xlsx` โ virtualized SkiaSharp grid, formula engine, formatting toolbar |
| **[Document & Slide Viewers](docs/controls/document-viewer.md)** | Read-only `.docx` reflowed to the control's width, and `.pptx` as fitted artboards |
| **[Document Editor](docs/controls/document-editor.md)** | A `.docx` editor โ typing, styles, inline objects, page margins, platform spell check |
| **[Slide Editor](docs/controls/slide-editor.md)** | A `.pptx` editor โ click a shape to move or resize it, double-click for a caret in its text |
| **[Office Shell](docs/controls/office-shell.md)** | The Word / Excel / PowerPoint window around the editors โ title bar, command search, File backstage, ruler, panes, status bar with zoom |
| **[Notebook](docs/controls/notebook.md)** | A OneNote-style free-form canvas โ write anywhere, draw over it, shapes and pictures, sections and pages |
### Collections & grids
| Control | |
|---|---|
| **[DataGrid](docs/controls/datagrid.md)** | Sorting, filtering, grouping, aggregates, selection, inline editing, paging, virtualization |
| **[TreeDataGrid](docs/controls/tree-data-grid.md)** | The DataGrid in hierarchy mode โ nested rows with lazy loading per level |
| **[TableView](docs/controls/tableview.md)** | Settings-style table with 14 cell types, sections, cascading styles and drag-sort |
| **[TreeView](docs/controls/treeview.md)** | Hierarchical tree with lazy loading, drag/drop reorder and selection predicates |
| **[VirtualizedGrid](docs/controls/virtualized-grid.md)** | Grouped grid with sticky headers, virtualization and load-more |
| **[StaggeredGrid](docs/controls/staggered-grid.md)** | Pinterest-style masonry layout with variable-height items |
| **[ParallaxCollectionView](docs/controls/parallax-collection-view.md)** | A list with a hero header that translates, collapses and fades as it scrolls |
| **[CarouselGallery](docs/controls/carousel-gallery.md)** | Netflix-style carousel with snap-to-center, scale transforms and peek insets |
| **[Gantt](docs/controls/gantt.md)** | Project timeline โ hierarchy and rollups, dependencies with lag, working calendars, drag-to-schedule and a critical path |
| **[Kanban](docs/controls/kanban.md)** | Drag cards between columns โ enforced WIP limits, swimlanes, collapsible columns, cancellable moves and an inline add-card composer |
| **[Diagram](docs/controls/diagram.md)** | Hierarchies, decision trees, flowcharts and mindmaps โ five auto-layouts, shape-aware connectors, drag, draw and undo |
| **[Carousel](docs/controls/carousel.md)** | Embla-style drag carousel for Blazor โ looping, autoplay, thumbnails, scroll-linked effects |
| **[CoverFlowView](docs/controls/cover-flow.md)** | Album-art Cover Flow โ tilted, stacked side covers, drag/flick with momentum, reflections and a caption |
### Layout & overlays
| Control | |
|---|---|
| **[Layout & AppLayout](docs/controls/layout.md)** | VStack/HStack, a responsive 12-column grid, and an app shell with collapsible panels (Blazor) |
| **[ShinyFlexLayout](docs/controls/flex-layout.md)** | A fast replacement for `FlexLayout` that caches measurements, with row/column gaps (MAUI) |
| **[YogaLayout](docs/controls/yoga-layout.md)** | [Yoga](https://www.yogalayout.dev/)'s (React Native's) flexbox model: absolute insets, percentages, aspect ratio and auto margins. Pure C# on MAUI, CSS on Blazor |
| **[FloatingPanel + OverlayHost](docs/controls/floating-panel.md)** | Draggable bottom/top panel with detents, header peek and backdrop management (MAUI) |
| **[Flyout](docs/controls/flyout.md)** | Side panel that rests as an icon rail and pushes or floats over content (MAUI) |
| **[Foldables](docs/controls/foldables.md)** | Fold-aware layouts on Android foldables and iPhone Duo โ panes snap to the fold, overlays move off it (MAUI add-on; CSS on Blazor) |
| **[TabbedPage & TabBar](docs/controls/tabbedpage.md)** | Tabs with motion icons, badges, transitions and a raised centre button (MAUI) |
| **[NavigationPage](docs/controls/navigationpage.md)** | Toolbar items on the **left** as well as the right, overflow, badges, large title (MAUI) |
| **[ShinyToolbar & ShinyTabBar](docs/controls/toolbar-tabbar.md)** | Screen-docked action toolbar and mobile-style tab bar (Blazor) |
| **[Ribbon](docs/controls/ribbon.md)** | Office-style tabbed command bar โ groups, contextual tabs, collapse and overflow (desktop + Blazor) |
| **[Modal](docs/controls/modal.md)** | A modal window with focus trap, scroll lock, drag, resize and maximize (Blazor) |
| **[Overlay & LoadingOverlay](docs/controls/overlay.md)** | Full-screen overlay with a custom template or a built-in loading mode |
| **[Expander & Accordion](docs/controls/expander.md)** | Disclosure panel whose fade/slide/height reveals combine, plus the accordion that stacks them |
| **[StateView & Wizard](docs/controls/wizard.md)** | Named branches switched by one string, and the multi-step flow built on them |
| **[Timeline](docs/controls/timeline.md)** | Vertical rail of markers with arbitrary content beside each one, and an active position |
| **[Quick Entry](docs/controls/quick-entry.md)** | Assistant-style prompt popup over whatever the user is looking at, with a screen-edge glow |
| **[Fab & FabMenu](docs/controls/fab.md)** | Floating action button and the expanding multi-action menu |
| **[FrostedGlassView](docs/controls/frosted-glass.md)** | Native blur โ `UIVisualEffectView`, `RenderEffect`, `backdrop-filter` |
### Input
| Control | |
|---|---|
| **[ShinyButton](docs/controls/button.md)** | A real working state, success/error states, and leading/trailing icon slots |
| **[ButtonGroup](docs/controls/button-group.md)** | Related buttons joined into one segmented control, with optional selection |
| **[TextEntry](docs/controls/textentry.md)** | Floating placeholder, tool slots, validation hints, character count, keyboard accessory |
| **[AutoCompleteEntry](docs/controls/autocomplete.md)** | Debounced search with dropdown suggestions and custom item templates |
| **[TagEntry](docs/controls/tag-entry.md)** | Free-text tags committed as removable chips, with delimiters, limits and validation |
| **[ChipGroup](docs/controls/chip-group.md)** | A bound set of chips, selectable singly or in any number, reporting the items themselves |
| **[CountryPicker](docs/controls/country-picker.md)** | Country search with flag emoji, name and dial code |
| **[AddressEntry](docs/controls/address-entry.md)** | Address search with geocoding and structured results |
| **[ColorPicker](docs/controls/colorpicker.md)** | Spectrum, hue bar, opacity slider, hex input and preview swatch |
| **[FontPicker](docs/controls/fontpicker.md)** | Family and size pickers, each font previewed in its own typeface |
| **[Slider](docs/controls/slider.md)** | Cold-to-hot gradient track, blended thumb and tooltip |
| **[RangeSlider](docs/controls/range-slider.md)** | Two thumbs, per-thumb tooltips and min/max gap constraints |
| **[SecurityPin](docs/controls/security-pin.md)** | PIN entry with individually rendered cells and optional masking |
| **[PasswordStrength](docs/controls/password-strength.md)** | Live strength meter, rule checklist and a pluggable async scorer |
| **[Captcha](docs/controls/captcha.md)** | A local challenge, reCAPTCHA, hCaptcha or Turnstile behind one component (Blazor) |
| **[SignaturePad](docs/controls/signature-pad.md)** | Signature capture on a canvas with PNG export |
| **[Gamepad](docs/controls/gamepad.md)** | On-screen NES / SNES / Xbox / PlayStation controller that is a real Shiny.Gamepad `IGamepad` (add-on) |
| **[MediaPickerButton](docs/controls/media-picker-button.md)** | Add photos from gallery or camera, re-encoded and capped, shown in a carousel |
| **[DurationPicker](docs/controls/duration-picker.md)** | Duration picker in a floating panel, with min/max and interval constraints |
| **[Range Pickers](docs/controls/range-pickers.md)** | Date range, time range and date/time range pickers plus an inline range calendar โ presets, min/max spans, blocked days, overnight times |
| **[Keyboard Shortcuts](docs/controls/keyboard-shortcuts.md)** | Page, view and modal shortcuts with โ/Ctrl per platform, chords, repeat and push-to-talk release |
### Display & media
| Control | |
|---|---|
| **[ShinyImage](docs/controls/shiny-image.md)** | Remote image loading with placeholder, progress ring, caching, and SVG on MAUI |
| **[ImageViewer](docs/controls/image-viewer.md)** | Full-screen overlay with pinch, pan and double-tap zoom |
| **[ZoomPanView](docs/controls/zoom-pan-view.md)** | Pinch, pan and double-tap zoom over any content, not only a picture |
| **[FloatingToolbar](docs/controls/floating-toolbar.md)** | A toolbar that floats over a control like a tooltip, across or down |
| **[ImageEditor](docs/controls/image-editor.md)** | Crop, rotate, draw, shapes, text annotations, undo/redo and export |
| **[CameraView](docs/controls/camera.md)** | Preview, photo/video capture, an effects pipeline, and pluggable frame analyzers |
| **[Long-Range Barcode Scanning](docs/controls/long-range-barcode.md)** | `BarcodeAnalyzer Mode="LongRange"` (MAUI): reads 1D/2D codes across a room โ locate-then-decode, blur-tolerant 1D decoding, enlarged native crops, tracking and auto-zoom |
| **[IMediaService](docs/controls/media-service.md)** | MAUI + Blazor service over a modal CameraView โ permissions, capture, gallery, and Scanโฆ for barcodes/OCR/documents |
| **[MediaElement](docs/controls/mediaelement.md)** | Local and remote audio/video, background playback with lock-screen controls, and PiP |
| **[VideoText](docs/controls/video-text.md)** | Display text whose letters are windows onto a looping, muted video |
| **[ChatView](docs/controls/chatview.md)** | Provider-driven chat UI โ bubbles, typing, paging, reactions, attachments, composer |
| **[Scheduler](docs/controls/scheduler.md)** | Calendar grid, agenda timeline and event list over one provider interface |
| **[Markdown](docs/controls/markdown.md)** | Native markdown renderer and an editor with a formatting toolbar and live preview |
| **[Mermaid Diagrams](docs/controls/mermaid-diagrams.md)** | Native Mermaid flowcharts โ no WebView, AOT-compatible on MAUI |
| **[Floor Plan](docs/controls/floorplan.md)** | Rooms, walls, doors, cubicles, outlets and furniture on a pan/zoom surface โ editor and seating-chart modes |
| **[Barcodes & QR Codes](docs/controls/barcodes.md)** | Pure-managed 1D/2D barcode and QR rendering across 13 symbologies |
| **[Keyframe Animation](docs/controls/keyframe.md)** | Declarative XAML timelines that seek, reverse and export deterministically (MAUI) |
| **[Marquee](docs/controls/marquee.md)** | Endless scrolling content โ horizontal, vertical or any angle, with faded edges and pause on hover |
| **[Scratch Card](docs/controls/scratch-card.md)** | Scratch a cover view (image, gradient, anything) away to reveal the view underneath, with a threshold event and auto-reveal |
| **[Border Animations](docs/controls/border-animations.md)** | BorderBeam and ShineBorder โ Magic UI-style animated card outlines, a travelling beam or a drifting multi-colour shine |
| **[AnimatedBackground](docs/controls/animated-background.md)** | A container that draws an animated effect behind its content โ aurora, particles, snow, rain, meteors, dot spotlight, grain, stars, fireflies, bubbles, waves, Matrix rain |
| **[Motion Icons](docs/controls/motion-icons.md)** | 111 animated icons driven by a timer, hover, tap, appearance or a command |
### Status & feedback
| Control | |
|---|---|
| **[Toast](docs/controls/toast.md)** | Code-invoked toasts with a queue, auto-dismiss, spinner and progress bar |
| **[Dialogs](docs/controls/dialogs.md)** | Owned, animated alert / confirm / prompt / action sheet โ never the native one |
| **[ProgressBar](docs/controls/progressbar.md)** | Gradient fill with a Vista-style shimmer, determinate and indeterminate |
| **[ProgressLine](docs/controls/progressline.md)** | The thin page-edge loading line, docked clear of the nav and tab bars |
| **[Gauge](docs/controls/gauge.md)** | Speedometer / tachometer dial whose needle springs, overshoots and settles like a real one, with ranges, peak hold and an ignition sweep |
| **[Confetti](docs/controls/confetti.md)** | Magic UI-style confetti bursts on any tap or click, or from code, with five presets |
| **[BadgeView](docs/controls/badge.md)** | Content-wrapping corner badge with text, dot, count overflow and pulse |
| **[NotchView](docs/controls/notch.md)** | Dynamic Island / camera-notch surface that morphs to fit any content; as a desktop window it floats over every app on Windows, Linux and macOS, and grows out of the MacBook notch |
| **[Avatar & AvatarGroup](docs/controls/avatar.md)** | Picture โ initials โ silhouette with a presence dot; overlapping facepile with a +N chip |
| **[PillView](docs/controls/pillview.md)** | Status pills and chips with preset themes and accessible contrast |
| **[SplashScreen](docs/controls/splash-screen.md)** | A boot splash that paints before Blazor starts (Blazor) |
### Guidance
| Control | |
|---|---|
| **[Walkthrough](docs/controls/walkthrough.md)** | Dim the page and cut an animated spotlight around one control at a time |
| **[Tooltip](docs/controls/tooltip.md)** | Themed bubble that wraps or points at a target and auto-flips to whichever side has room |
### Desktop
| Control | |
|---|---|
| **[Desktop add-on](docs/controls/desktop.md)** | Tray icon, docking, desktop Quick Entry, global hotkeys and the AppKit/GTK4/Catalyst keyboard-shortcut sources โ plus the on-screen keyboard |
| **[File Drop](docs/controls/file-drop.md)** | Files dropped anywhere on the window, including over a `BlazorWebView` |
## Commercial Support
Shipping this to production? [ShinySoft Technologies](https://shinysoft.biz), the company that builds and maintains the Shiny libraries, offers priority issue response, support agreements, architecture reviews and private office hours. See [Commercial Support](https://shinylib.net/foundation/support/?utm_source=github&utm_medium=readme#commercial-support) or [get in touch](https://shinysoft.biz/contact?utm_source=github&utm_medium=readme). Community support through GitHub issues and discussions stays free.