已对照 6,300 多张参考渲染图校验

为 Avalonia 应用带来现代的观感与动效。

一套为 Avalonia 原生控件打造的主题，采用 shadcn/ui 的 Nova 风格，并补上 Avalonia 缺少的控件与功能：92 个组件，支持浅色、深色以及 GPUI Kit 的 36 套配色主题；每个变体、尺寸与状态都逐像素校验，动效逐帧校验。

快速开始浏览组件

92 个组件38 套配色主题支持 NativeAOT

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>

能力

对标参考实现，精确到像素。

只有每个状态都成立，外观才算完成；因此每个状态都会渲染、比对，并在两种主题下留存。

逐像素校验

每个变体、尺寸与状态都会与浅色、深色下的参考渲染图比对，每次改动覆盖 6,300 多个用例。

浅色深色无头

reference

avalonia

0 px

动效逐帧校验

过渡由弹簧驱动，动画与参考实现逐帧比对，而不是靠肉眼判断。

UIKit.Spring.ControlUIKit.Spring.Move

Avalonia 原生控件

其中 48 个组件由 UIKitTheme 替换 Avalonia 控件的 ControlTheme：颜色、内边距、轮廓、内部布局、状态与动画。

ButtonTextBoxComboBoxTabControl

ButtonTextBoxCheckBox

补齐 Avalonia 的缺失

uikit: 命名空间下新增 43 个控件，从 Badge、Stepper 到带搜索的 Select 和虚拟化 Tree；还有为 Avalonia 原生控件补充能力的附加属性，例如带加载状态的 Button。

uikit:Badgeuikit:Selectuikit:Buttons

1234

NewTagDone

数据表格

主包提供 TableView；可选包为 Avalonia 的 DataGrid 带来排序与列宽调整。

TableViewDataGrid

配色主题

Default Light、Default Dark，以及 GPUI Kit 同捆的 36 套主题（包括 Aurora 的渐变）。通过 RequestedThemeVariant 为整个应用或任意局部切换。

UIKitThemeVariantsUIKit.Primary

Lucide 图标

组件使用的图标以编译后的几何数据提供，供 PathIcon 使用，并提供与控件匹配的四种尺寸。

PathIconUIKit.Icon.Search

支持 NativeAOT

只使用编译绑定，不使用反射。每次改动都会运行 NativeAOT 冒烟测试，在两种主题下渲染每个控件。

TrimmingNativeAOT

.axaml⇢compiled⇢native

可在 Web 上运行

同样的控件通过 Avalonia 的 WebAssembly 后端运行在浏览器中。本站的每个演示都是实时运行的。

Avalonia.BrowserWASM

Desktop

⇢WA⇢

Web

四个包，一套主题。

只引入应用真正用到的主题。

UIKitTheme 覆盖 Avalonia 内置控件与新增控件。Avalonia 将 ColorPicker 和 DataGrid 作为独立包发布，本库同样如此；Dock.Avalonia 的主题也单独成包，应用不会引入用不到的依赖。

AvaloniaUIKit

主题与新增控件

为 Avalonia 原生控件提供 UIKitTheme，并包含 uikit: 控件与附加属性、颜色令牌和图标。

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

48 个组件基于 Avalonia 原生控件
43 个新增 uikit: 控件
可单独使用，也可叠加在 FluentTheme 之上

快速开始

AvaloniaUIKit.ColorPicker

Avalonia 的 ColorPicker

UIKitColorPickerTheme 为 ColorPicker 包带来色块或带调色板弹出层的输入框外观。主包中的 uikit:ColorSelect 则两者都不需要。

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

色块与输入框两种外观
调色板与组件分页签
可裁剪，兼容 NativeAOT

阅读 Color Picker 文档

AvaloniaUIKit.DataGrid

Avalonia 的 DataGrid

UIKitDataGridTheme 为 DataGrid 带来与 TableView 一致的数据表格外观，并保留 DataGrid 自身功能。

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

排序指示、列宽调整与列重排
条纹、无边框和尺寸样式类
仅面向已使用 DataGrid 的应用

阅读 Data Table 文档

AvaloniaUIKit.Dock

Dock.Avalonia 的停靠布局

UIKitDockTheme 为 Dock.Avalonia 的停靠控件带来标签栏、标题栏、分隔手柄与拖放目标。

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

带面板菜单的标签栏与标题栏
按指针位置显示拖放目标
仅面向已使用 Dock.Avalonia 的应用

阅读 Dock 文档

原则

行为属于 Avalonia。
外观与动效属于主题。

UIKitTheme 只替换每个控件的 ControlTheme，不改动控件本身：行为、输入处理、无障碍与 API 都保持 Avalonia 原样。缺失的能力只在应用主动使用时补充：要么设置一个附加属性，要么放置一个 uikit: 控件。

探索组件