FluentFlyout
The modern Flyout app for Windows 11, built with Fluent 2 Design principles. Media Flyouts, Taskbar Widgets and more.
Install / Use
/learn @unchihugo/FluentFlyoutREADME
FluentFlyout is the modern Flyout app for Windows, built with Fluent 2 Design principles.
The UI seemingly blends in with Windows 11, providing you an uninterrupted, clean, and native-like experience when controlling your media, lock keys, and more.
FluentFlyout features smooth animations, blends with your system's color themes and includes a suite of personalization settings while providing media controls, information and more in nice and modern looking popup flyouts.
<a href="https://apps.microsoft.com/detail/9n45nsm4tnbp?referrer=appbadge&cid=GitHub_README&mode=direct"> <img src="https://get.microsoft.com/images/en-us%20dark.svg" width="200"/> </a> <img alt="FluentFlyoutHero-Cinemascope" src="https://github.com/user-attachments/assets/a7c7e2db-e21b-4435-9acc-0b2c5f38eb7d" />Features ✨
- Audio flyout: Displays Cover, Title, Artist and media controls
- "Up Next" flyout: shows what's next when a song ends
- Lock Keys flyout: displays the status of lock keys at a glance
- Taskbar widget: shows media info directly on the Windows taskbar
- Native Windows-like design
- Uses Fluent 2 components
- Utilises Windows Mica blur
- Supports Light and Dark mode
- Matches your device color theme
- Smooth animations
- Customizable flyout positions
- Includes Repeat All, Repeat One and Shuffle
- Sits unobtrusively in system tray
Taskbar widget ⏯️
<div align="center"> <img height="440px" width="auto" src="https://github.com/user-attachments/assets/43963c54-e2d8-4b93-9842-482e12b2c592" /> </div> <details close> <summary>Video showcase</summary>https://github.com/user-attachments/assets/bfc7666f-1d59-4cbf-8d15-3855671cb147
</details>Flyouts and more 🎵
<div align="center"> <img height="205px" width="auto" src="https://github.com/user-attachments/assets/4dab1c12-594a-4785-bddc-0da1783bf1c8"> <img height="205px" src="https://github.com/user-attachments/assets/b4306026-b274-418b-a39e-78877e7610a7"> <img height="190px" src="https://github.com/user-attachments/assets/39de69fe-54c8-4b22-880c-7f0370b8dd9c"> <img height="190px" src="https://github.com/user-attachments/assets/a25adb0e-963a-49a5-8abb-d9a288c2ad9a"> <img height="190px" src="https://github.com/user-attachments/assets/2de44e7b-7e6c-4575-bf3b-0be2f741c994"> </div> <details open> <summary>v2.0 screenshots</summary> <div align="center"> <img height="220px" width="auto" src="https://github.com/user-attachments/assets/e45592d5-8576-4d6a-8679-56baacccd585"> <img height="220px" width="auto" src="https://github.com/user-attachments/assets/ff2fcfab-8e24-48cf-9bdf-d35252eb3e67"> </div> </details>How to install 📥
Which version should you choose?
The Microsoft Store version provides automatic updates, but has a one-time purchase to unlock a few extra features.
The GitHub version is completely free and open-source, but requires manual updates.
Read more about the project's model in the Sustainability & The Microsoft Store section below.
Using Microsoft Store
<a href="https://apps.microsoft.com/detail/9n45nsm4tnbp?referrer=appbadge&cid=GitHub_README_2&mode=direct"> <img src="https://get.microsoft.com/images/en-us%20dark.svg" width="300"/> </a>Looking for FluentFlyout Settings? You can access it by clicking the system tray icon
Using .msixbundle installer
- Go to the latest release page
- Download the "*.cer" file (real certificates cost a lot of money)
- Open the certificate and press "Install Certificate..."
- On the Certificate Import Wizard, select "Local Machine", press "Next" and grant Admin Access
- Select "Place all certificates in the following store", then "Browse...", choose "Trusted Root Certification Authorities" and "OK"
- Finally, press "Next" and then "Finish". It might ask you to confirm, press Yes
- Download the "*.msixbundle" file
- The App Installer will pop up, press "Install", or "Update" if you've installed FluentFlyout before
Contributing 💖
Please feel free to contribute in any way you can! Check out CONTRIBUTING.md to get started. If you want to help with translations, please visit our Weblate page.
Translation Status
<a href="https://hosted.weblate.org/engage/fluentflyout/"> <img src="https://hosted.weblate.org/widget/fluentflyout/multi-auto.svg" alt="Translation status" /> </a>Thanks to our amazing team of contributors!
<a href="https://github.com/unchihugo/fluentflyout/graphs/contributors"> <img src="https://contrib.rocks/image?repo=unchihugo/fluentflyout&anon=1" /> </a>Sustainability & The Microsoft Store 💰
FluentFlyout is and always will be free and open-source. You can download the latest builds from the Releases tab or compile the project yourself to access the full feature set without restrictions.
Maintaining a project of this scale takes time and effort. To support ongoing development, the Microsoft Store version offers a convenient way to install the app and includes a few optional features unlockable via a small payment (€2.99, varies by region).
- Microsoft Store version: provides automatic background updates and one-click installation. A small set of features is unlocked with a one-time purchase to help fund development.
- GitHub version: Completely free, fully featured, and open-source. The only trade-off is that updates and installation must be done manually.
Thank you for your support and understanding!
Credits 🙌
- Hugo Li - Original Developer, Microsoft Store Publisher, CN & NL Translations
- LiAuTraver - Code Contributor (app theme switcher)
- AksharDP - Code Contributor (media seekbar & duration)
- Hykerisme - CN Translation
- nopeless - Code Contributor (QoL features)
