AtomUI

<img src="./resources/images/readme/atomui-oss-banner.png"/> <br/> <div align="center">

Changelog · Report Bug · Request Feature

</div>

Documentation Language: English | 简体中文

Overview

AtomUI is an Ant Design 6 component system for Avalonia/.NET desktop applications. It brings Ant Design's enterprise interaction patterns, visual language, design tokens and theme customization model to native cross-platform apps on Windows, macOS and Linux.

The project includes production-oriented desktop controls, icon packages, font packages, native window integration, DataGrid, ColorPicker and source generators for custom controls, tokens and localization. Feedback, issues and pull requests are welcome.

<img src="./resources/images/readme/Gallery.png"/>

Features

• Ant Design 6 experience adapted for native Avalonia desktop applications.
• A broad set of ready-to-use controls for enterprise software, including layout, navigation, data entry, feedback, data display and optional advanced packages.
• Token-driven theming built on Avalonia's style and resource system, with support for consistent customization across controls.
• Cross-platform desktop support for Windows, macOS and Linux with a shared .NET/XAML development model.
• Source generators for custom controls, theme tokens and localization to reduce repetitive infrastructure code.

Requirements

.NET 8 or later (development supports .NET 10)<br> Avalonia 12.1.x<br> Windows, macOS and Linux<br>

Latest Release Notes

AtomUI 6.1.2 adds Light, Dark and Follow System appearance modes to the Gallery, fixes Dialog and Drawer masks over drawn window chrome, and fixes Splitter measurement with an unconstrained cross axis. Review the Changelog for release details.

Incubator

Thanks to Tongming Lake Center for their incubation support of AtomUI OSS

<div style="margin-top: 50px"> <img src="./resources/images/readme/TLAIC.svg" width="400"/> </div>

Community

<div align="center"> <table> <tr> <th>Telegram</th> <th>WhatsApp</th> <th>WeChat Group</th> <th>QQ Group</th> </tr> <tr> <td><img src="resources/images/readme/atomui-telegram.png" width="240"/> </td> <td><img src="resources/images/readme/atomui-whatsapp.png" width="240"/> </td> <td><img src="resources/images/readme/atomui-wechat.png" width="240"/></td> <td><img src="resources/images/readme/atomui-qq.png" width="240"/></td> </tr> </table> </div>

Get Started

Add NuGet packages

AtomUI is distributed through NuGet. Install the main desktop controls package first, then add optional packages such as DataGrid and ColorPicker only when your application needs them. The examples below use the latest project version.

The packages we have released are as follows:

| Package | Description | |-------------------------------------|----------------------------------------------------------------------------| | AtomUI.Native | Native platform infrastructure | | AtomUI.Core | Core infrastructure — theme system, token system and animations | | AtomUI.Fonts.AlibabaSans | Alibaba Sans font package | | AtomUI.Fonts.AlibabaPuHuiTi | Alibaba PuHuiTi font package | | AtomUI.Icons.Shared | Icon infrastructure | | AtomUI.Icons.AntDesign | Ant Design icon package | | AtomUI.Controls.Shared | Shared interfaces and enums for control development | | AtomUI.Controls | Base controls and shared control capabilities | | AtomUI.Desktop.Controls | Desktop control library — the main package | | AtomUI.Desktop.Controls.DataGrid | DataGrid control (opt-in) | | AtomUI.Desktop.Controls.ColorPicker | ColorPicker control (opt-in) | | AtomUI.Generator | Source generators for custom controls, tokens and localization |

dotnet add package AtomUI.Desktop.Controls --version 6.1.2
dotnet add package AtomUI.Desktop.Controls.DataGrid --version 6.1.2
dotnet add package AtomUI.Desktop.Controls.ColorPicker --version 6.1.2

You can also install the packages from your IDE's NuGet package manager. In Rider, open:

NuGet -> Packages

Search for "AtomUI" and install the packages your project needs.

Before installation, check "Frameworks" and "Dependencies" in the package details to confirm compatibility with your target framework and Avalonia version.

Enable AtomUI library

Project Configure

<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <OutputType>WinExe</OutputType>
        <TargetFramework>net8.0</TargetFramework>
        <ImplicitUsings>enable</ImplicitUsings>
        <Nullable>enable</Nullable>
        <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
        <ApplicationManifest>app.manifest</ApplicationManifest>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="AtomUI.Desktop.Controls" Version="6.1.2"/>
        <PackageReference Include="AtomUI.Desktop.Controls.DataGrid" Version="6.1.2"/>
        <PackageReference Include="AtomUI.Desktop.Controls.ColorPicker" Version="6.1.2"/>
        <PackageReference Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.1"/>
    </ItemGroup>
</Project>

Program.cs Configure

using Avalonia;
using System;
using AtomUI;
using ReactiveUI.Avalonia;

namespace AtomUIProgressApp;

internal class Program
{
    [STAThread]
    public static void Main(string[] args) => BuildAvaloniaApp()
        .StartWithClassicDesktopLifetime(args);

    public static AppBuilder BuildAvaloniaApp()
    {
        return AppBuilder.Configure<App>()
                         .UseReactiveUI()
                         .UseAtomUIPlatformDetect()
                         .WithAtomUIDefaultOptions()
                         .WithDeveloperTools()
                         .LogToTrace();
    }
}

Enable AtomUI in the Application Class

using AtomUI;
using AtomUI.Desktop.Controls;
using AtomUI.Localization;
using AtomUI.Theme;
using Avalonia;
using Avalonia.Markup.Xaml;

public partial class App : Application
{
    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);

        this.UseAtomUI(builder =>
        {
            builder.UseLanguages(
                LanguageTags.EnUS,
                [LanguageTags.EnUS, LanguageTags.ZhCN, LanguageTags.ZhTW]);
            builder.WithDefaultTheme(IThemeManager.DEFAULT_THEME_ID);
            builder.UseAlibabaSansFont();
            builder.UseDesktopControls();
            builder.UseDesktopColorPicker();   // optional
            builder.UseDesktopDataGrid();      // optional
        });
    }
}

To make the first rendered frame use the dark theme, configure the initial theme algorithm in the builder:

this.UseAtomUI(builder =>
{
    builder.WithDefaultTheme(IThemeManager.DEFAULT_THEME_ID, ThemeAlgorithm.Dark);
    builder.UseDesktopControls();
});

SetDarkThemeMode(true) is intended for runtime theme switching after AtomUI has been initialized.

Start building with AtomUI

After AtomUI is registered, you can use AtomUI controls and Ant Design icons