Joufflu

A modern WPF component library that makes your desktop apps look good by default.

Joufflu gives .NET WPF apps a cohesive set of inputs and reusable controls built on a design system of themed brushes, dimensions and layout helpers. Every control reads its colours through DynamicResource, so the whole UI re-themes live.

Its objective is to provide:

• Easily accessible, up-to-date documentation.
• A sample app that serves as a live example: clone git clone https://github.com/ndegheselle/Joufflu.git and start Joufflu.Samples.
• A coherent set of tokens that defines a theme, used by every control.

Highlights

• 🌗 Live theming - flip the theme at runtime and every control follows instantly.
• 🎨 A real design system, built to be customized - clear tokens with semantic colours, dimensions, sizing and spacing exposed as override-able resource keys.
• 🖥️ Customize theme - a window (palette button, top right of the gallery's title bar) that edits the tokens live, offers presets and generates the dictionary to merge.

Controls, in modular packages:

• 🧩 Ready-to-use inputs - numeric, decimal and timespan pickers, searchable and tag combo boxes, file and colour pickers, inline-editable text, dropdowns.
• 🧭 Navigation & overlays - a navigation menu, a view-model-first page container, awaitable modal dialogs and a paging selector.
• 🗂️ A file explorer - breadcrumb, folder tree and file list sharing a source, with shell-backed file operations and nodes of your own.
• 🧾 JSON data trees - fill a value in against a JSON Schema, or build one from scratch.

Not sure if Joufflu is your fit? See Joufflu vs other WPF UI libraries and the copy-paste recipes.

Documentation

📖 Full documentation: https://ndegheselle.github.io/Joufflu/

🤖 For LLM agents: a machine-readable llms.txt index of the docs is available at https://raw.githubusercontent.com/ndegheselle/Joufflu/main/docs/llms.txt - it links every page's raw Markdown source - and llms-full.txt holds all of those pages in a single file. (Prefer this raw URL over the rendered site, which can return 403 to automated fetchers.)

🧩 For Claude Code: this repository is also a plugin marketplace. The joufflu plugin adds skills for the Joufflu API, scaffolding an app shell, custom themes and restyling existing views (see plugins/joufflu):

/plugin marketplace add ndegheselle/Joufflu
/plugin install joufflu@joufflu

What's inside

Section	Contents
Themes (Joufflu)	The application shell (ThemedWindow), ThemeManager, the design tokens and live theme customization
Natives (Joufflu)	WPF's built-in controls (buttons, text boxes, combo boxes, data grid, …) restyled to match the design system, plus text sizes through Sizing.Size, FontIcon and the Card styles
Toolkit (Joufflu, namespace Joufflu.Toolkit)	Sizing, spacing, derived dimensions, tooltip, animation, drag and drop and shared width attached properties, and the rules for creating a custom control
Feedback (Joufflu.Feedback)	Badge, Spinner, Toasts and their ToastContainer
Inputs (Joufflu.Inputs)	NumericUpDown, DecimalUpDown, TimeSpanPicker, FormatTextBox, Search, ComboBoxSearch, ComboBoxTags, TextEditable, FilePicker, ColorPicker, Dropdown
Navigation (Joufflu.Navigation)	NavigationMenu, Paging, OverlayContainer and awaitable modal overlays shown by an Overlayer
Data (Joufflu.Data)	DataFill filling a value in against a JSON Schema, DataEdit building one from scratch, DataDisplay showing one read only
File explorer (Joufflu.FileExplorer)	ExplorerList, ExplorerTree, Explorer, ExplorerControlBar and their IExplorerSource

The last five are the optional Joufflu control packages, all built on the core Joufflu one.

Getting started

1. Add the packages you need. Joufflu is the core (styles & theming); Joufflu.Data, Joufflu.Feedback, Joufflu.FileExplorer, Joufflu.Inputs and Joufflu.Navigation are optional and all build on it:

   dotnet add package Joufflu
   dotnet add package Joufflu.Data          # optional: JSON data trees (needs Joufflu.Inputs)
   dotnet add package Joufflu.Feedback      # optional: badges, spinner, toasts
   dotnet add package Joufflu.FileExplorer  # optional: file explorer (needs Joufflu.Feedback)
   dotnet add package Joufflu.Inputs        # optional: input controls
   dotnet add package Joufflu.Navigation    # optional: navigation & overlays
   

2. Merge the control styles in App.xaml:

   <Application.Resources>
       <ResourceDictionary>
           <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="pack://application:,,,/Joufflu;component/Resources.xaml" />
           </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>
   </Application.Resources>
   

3. Initialize the theme manager once at startup, before the first window shows:

   // App.xaml.cs - OnStartup
   ThemeManager.Instance.Initialize();
   

4. Use the controls as shown in the documentation.

Design system

The design system is exposed as resource keys you can override in your own dictionary (merged after the Joufflu resources):

• Colours - joufflu:Colors.*, including the semantic families (primary, secondary, success, info, warning, danger); the joufflu:Brushes.* follow them.
• Dimensions - joufflu:Dimensions.* (corner radius, border thickness, spacing, control heights, font sizes and padding per size).

Run the gallery and open Customize theme (palette button in the title bar) to tweak these interactively and generate a ready-to-merge dictionary.

Running the samples

• Targets net10.0-windows: needs the .NET 10 SDK, or Visual Studio 2026 with the .NET Desktop development workload.
• Open Joufflu.sln and start the Joufflu.Samples project to explore every control, theme and toolkit helper interactively.

Acknowledgments

• Lucide icon font
• CommunityToolkit.Mvvm for MVVM boilerplate