https://github.com/soenneker/soenneker.blazor.floating.windows
A Blazor UI element for a drag and drop, overlayed window
https://github.com/soenneker/soenneker.blazor.floating.windows
and blazor blazorlibrary csharp dotnet drag draggable drop floating floatingwindow windows
Last synced: 9 days ago
JSON representation
A Blazor UI element for a drag and drop, overlayed window
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.floating.windows
- Owner: soenneker
- License: mit
- Created: 2025-07-13T15:38:28.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-06-11T00:47:42.000Z (15 days ago)
- Last Synced: 2026-06-11T02:22:24.824Z (15 days ago)
- Topics: and, blazor, blazorlibrary, csharp, dotnet, drag, draggable, drop, floating, floatingwindow, windows
- Language: CSS
- Homepage: https://soenneker.com
- Size: 1.08 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.blazor.floating.windows/)
[](https://github.com/soenneker/soenneker.blazor.floating.windows/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.blazor.floating.windows/)
[](https://soenneker.github.io/soenneker.blazor.floating.windows/)
[](https://github.com/soenneker/soenneker.blazor.floating.windows/actions/workflows/codeql.yml)
# 
Soenneker.Blazor.Floating.Windows
> **Modern, customizable floating windows for Blazor**
---
## ? Features
- ?? **Draggable & Resizable** � Move and resize windows with smooth, modern UX
- ?? **Fully Customizable** � Colors, fonts, borders, shadows, and more
- ?? **Custom theming** � Built-in typed support
- ??? **Multiple Windows** � Manage, stack, and focus with z-index
- ?? **Responsive** � Works on desktop and mobile
- ? **Accessible** � ARIA labels, keyboard navigation
- ? **Event Callbacks** � React to show, hide, drag, resize, and more
---
## ?? Installation
```bash
dotnet add package Soenneker.Blazor.Floating.Windows
```
```csharp
// Program.cs
using Soenneker.Blazor.Floating.Windows.Registrars;
builder.Services.AddFloatingWindowAsScoped();
```
```razor
// _Imports.razor
@using Soenneker.Blazor.Floating.Windows
```
---
## ??? Basic Usage
```razor
Hello World!
This is a floating window with your content.
window?.Close()">Close
```
---
## ?? Theming & Styling
**Built-in themes:**
```razor
...
...
...
```
**Custom styling:**
```razor
{
["backdrop-filter"] = "blur(10px)",
["border"] = "2px solid #007bff"
}
}">...
```
---
## ?? Advanced Example
```razor
Advanced Features
This window demonstrates all the available features.
myWindow?.SetPosition(200, 200)">Move to (200,200)
myWindow?.SetSize(600, 500)">Resize to 600x500
myWindow?.BringToFront()">Bring to Front
@code {
private FloatingWindow? myWindow;
private void OnWindowShow() => Console.WriteLine("Window shown!");
private void OnWindowHide() => Console.WriteLine("Window hidden!");
private void OnDragStart() => Console.WriteLine("Dragging started!");
private void OnDragEnd() => Console.WriteLine("Dragging ended!");
}
```
---
## ?? API Overview
### Properties
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `Title` | `string` | `"Window"` | Title bar text |
| `Width` | `int?` | `400` | Initial width (px) |
| `Height` | `int?` | `300` | Initial height (px) |
| `InitialX` | `int?` | `100` | Initial X position |
| `InitialY` | `int?` | `100` | Initial Y position |
| `Draggable` | `bool?` | `true` | Enable dragging |
| `Resizable` | `bool?` | `true` | Enable resizing |
| `ShowCloseButton` | `bool?` | `true` | Show close button |
| `ShowTitleBar` | `bool?` | `true` | Show title bar |
| `StyleOptions` | `FloatingWindowStyleOptions` | `DefaultLight` | Styling config |
### Events
| Event | Description |
|-------|-------------|
| `OnShow` | Window shown |
| `OnHide` | Window hidden |
| `OnDragStart` | Dragging started |
| `OnDragEnd` | Dragging ended |
### Methods
| Method | Description |
|--------|-------------|
| `Show()` | Show window |
| `Hide()` | Hide window |
| `Toggle()` | Toggle visibility |
| `GetPosition()` | Get (x, y) |
| `SetPosition(x, y)` | Set position |
| `GetSize()` | Get (width, height) |
| `SetSize(width, height)` | Set size |
| `BringToFront()` | Bring window to front |