Verified against 6,300+ reference renders

Modern looks and motion for Avalonia apps.

A theme for Avalonia's own controls in the Nova style of shadcn/ui, plus the controls and features Avalonia lacks: 92 components in light, dark and GPUI Kit's 36 color themes, with every variant, size and state checked pixel by pixel and the motion frame by frame.

Get started Browse components

92 components38 color themesNativeAOT ready

Windows, macOS, Linux, WebAssembly

App.axaml<uikit:UIKitTheme />

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:uikit="using:AvaloniaUIKit"
        Title="Hello, World!">
  <uikit:Form Width="360">
    <uikit:FormField Label="Name">
      <TextBox PlaceholderText="Enter your name" />
    </uikit:FormField>
    <uikit:FormField Label="Plan">
      <ComboBox SelectedIndex="0">
        <ComboBoxItem Content="Free" />
        <ComboBoxItem Content="Pro" />
      </ComboBox>
    </uikit:FormField>
    <uikit:Form.Footer>
      <Button Classes="primary" Content="Let's Go!"
              Click="OnGo" />
    </uikit:Form.Footer>
  </uikit:Form>
</Window>

Capabilities

Built to match the reference, down to the pixel.

A look is only finished when it holds in every state, so each one is rendered, compared and kept in both themes.

Verified pixel by pixel

Each variant, size and state is compared with reference renders in light and dark, over 6,300 cases on every change.

LightDarkHeadless

reference

avalonia

0 px

Motion, frame by frame

Springs drive the transitions, and the animation is compared with the reference frame by frame instead of by eye.

UIKit.Spring.ControlUIKit.Spring.Move

Avalonia's own controls

For 48 of the components, UIKitTheme replaces the Avalonia control's ControlTheme: colors, padding, outlines, inner layout, states and animations.

ButtonTextBoxComboBoxTabControl

ButtonTextBoxCheckBox

What Avalonia lacks

43 new controls in the uikit: namespace, from Badge and Stepper to a Select with search and a virtualized Tree, plus attached properties that add what Avalonia's controls lack, such as a loading Button.

uikit:Badgeuikit:Selectuikit:Buttons

1234

NewTagDone

Data tables

TableView in the main package, and Avalonia's DataGrid with sorting and column resizing from an optional one.

TableViewDataGrid

Color themes

Default Light, Default Dark and the 36 themes GPUI Kit bundles, Aurora's gradients included. Switch with RequestedThemeVariant, for the app or any part of it.

UIKitThemeVariantsUIKit.Primary

Lucide icons

The icons the components draw ship as compiled geometry for PathIcon, in four sizes that match the controls.

PathIconUIKit.Icon.Search

NativeAOT ready

Compiled bindings only and no reflection. A NativeAOT smoke test renders every control in both themes on each change.

TrimmingNativeAOT

.axaml⇢compiled⇢native

Runs on the web

The same controls run in the browser on Avalonia's WebAssembly backend. Every demo on this site is live.

Avalonia.BrowserWASM

Desktop

⇢WA⇢

Web

Four packages. One theme.

Take only the themes your app uses.

UIKitTheme covers Avalonia's built-in controls and the new ones. Avalonia ships ColorPicker and DataGrid as packages of their own, and so does this library; the theme for Dock.Avalonia is separate too, so an app takes no dependency it does not use.

AvaloniaUIKit

The theme and the new controls

UIKitTheme for Avalonia's own controls, the uikit: controls and attached properties, the color tokens and the icons.

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

48 components on Avalonia's own controls
43 new uikit: controls
Works alone or on top of FluentTheme

Get started

AvaloniaUIKit.ColorPicker

Avalonia's ColorPicker

UIKitColorPickerTheme gives the ColorPicker package a swatch or a field with a palette popover. The main package's uikit:ColorSelect needs neither.

<Application.Styles>
  <uikit:UIKitTheme />
  <uikitcolor:UIKitColorPickerTheme />
</Application.Styles>

Swatch and input field looks
Palette and components on segmented tabs
Trimmable and NativeAOT compatible

Read the Color Picker docs

AvaloniaUIKit.DataGrid

Avalonia's DataGrid

UIKitDataGridTheme gives DataGrid the data table look of TableView, with the grid's own features.

<Application.Styles>
  <uikit:UIKitTheme />
  <uikitgrid:UIKitDataGridTheme />
</Application.Styles>

Sort indicators, column resizing and reordering
The stripe, borderless and size classes
Only for apps that already use DataGrid

Read the Data Table docs

AvaloniaUIKit.Dock

Dock.Avalonia's docking

UIKitDockTheme gives Dock.Avalonia's dock control the tab bars, title bars, split handles and drop targets of a dock.

<Application.Styles>
  <uikit:UIKitTheme />
  <uikitdock:UIKitDockTheme />
</Application.Styles>

Tab bars and title bars with a panel menu
Drop targets by where the pointer is
Only for apps that already use Dock.Avalonia

Read the Dock docs

Principle

Behavior belongs to Avalonia.
Looks and motion belong to the theme.

UIKitTheme replaces each control's ControlTheme and leaves the control itself alone: its behavior, input handling, accessibility and API stay exactly as Avalonia ships them. What the controls lack is added only where the app asks for it: an attached property it sets, or a uikit: control it places.

Explore the components