Installation

Add the AvaloniaUIKit package and UIKitTheme to your App.axaml.

#Package

dotnet add package AvaloniaUIKit

The themes for Avalonia's optional packages, and for the third-party library Dock.Avalonia, are separate, so an app that does not use them takes no extra dependency:

dotnet add package AvaloniaUIKit.ColorPicker
dotnet add package AvaloniaUIKit.DataGrid
dotnet add package AvaloniaUIKit.Dock

The Dock.Avalonia theme is made for one release of the library (12.1.0.6), which its package depends on exactly. It replaces the library's own themes: do not add those as well.

The library targets the current Avalonia 12 release and the latest .NET SDK.

#Theme

Add UIKitTheme to the application's styles. It is a Styles theme, like FluentTheme, and works on its own: it also themes the window, popups, the adorner layer and the focus ring. It follows the application's theme variant: Default Light and Default Dark, or one of the bundled color themes (see Theming).

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:uikit="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit"
             x:Class="MyApp.App">
  <Application.Styles>
    <uikit:UIKitTheme />
  </Application.Styles>
</Application>

The optional packages add a theme each, after UIKitTheme:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:uikit="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit"
             xmlns:uikitcolor="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit.ColorPicker"
             xmlns:uikitgrid="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit.DataGrid"
             xmlns:uikitdock="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit.Dock"
             x:Class="MyApp.App">
  <Application.Styles>
    <uikit:UIKitTheme />
    <uikitcolor:UIKitColorPickerTheme />
    <uikitgrid:UIKitDataGridTheme />
    <uikitdock:UIKitDockTheme />
  </Application.Styles>
</Application>

In XAML that uses the new controls, map the namespace with using::

xmlns:uikit="using:AvaloniaUIKit"

#On top of FluentTheme

UIKitTheme only themes the controls listed under Components. To keep a look for the others, add FluentTheme first; the later theme wins, and the themed controls look the same with or without Fluent underneath.

<Application.Styles>
  <FluentTheme />
  <uikit:UIKitTheme />
</Application.Styles>

#NativeAOT

AvaloniaUIKit and AvaloniaUIKit.ColorPicker are trimmable and AOT compatible: compiled bindings by default, and reflection is banned by an analyzer. Avalonia's DataGrid itself is not trimmable, so AvaloniaUIKit.DataGrid gives no NativeAOT guarantee; the basic table is TableView, in the main package. Dock.Avalonia does not declare itself trimmable either: AvaloniaUIKit.Dock has no trimming warnings of its own, but gives no NativeAOT guarantee for Dock (see Dock).