- Accordion
- Alert
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Carousel
- Checkbox
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Data Table
- Date Picker
- Description List
- Dropdown Button
- Empty
- Form
- Group Box
- Hover Card
- Icon
- Image
- Input
- Input Group
- Kbd
- Label
- Link
- List
- Marker
- Menu
- Message
- Notification
- Number Input
- Pagination
- Popover
- Progress
- Progress Circle
- Radio
- Rating
- Resizable
- Scrollable
- Select
- Separator
- Sheet
- Shimmer
- Sidebar
- Skeleton
- Slider
- Spinner
- Status Bar
- Stepper
- Switch
- Table
- Tabs
- Tag
- Textarea
- Time Field
- Title Bar
- Toggle
- Toggle Group
- Toolbar
- Tooltip
- Tree
- Virtual List
Package
The packages are not published to NuGet.org yet. Until they are, reference the projects from a clone of the repository (src/AvaloniaUIKit/AvaloniaUIKit.csproj and, if needed, the two optional projects), for example as a git submodule with a ProjectReference. The commands below show the intended way once the packages are out.
dotnet add package AvaloniaUIKitThe themes for Avalonia's optional packages are separate, so an app that does not use them takes no extra dependency:
dotnet add package AvaloniaUIKit.ColorPicker
dotnet add package AvaloniaUIKit.DataGridThe library targets the current Avalonia 12 release and the latest .NET SDK.
Theme
Add GpuiTheme 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, as GPUI draws them.
<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:GpuiTheme />
</Application.Styles>
</Application>The optional packages add a theme each, after GpuiTheme:
<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"
x:Class="MyApp.App">
<Application.Styles>
<uikit:GpuiTheme />
<uikitcolor:GpuiColorPickerTheme />
<uikitgrid:GpuiDataGridTheme />
</Application.Styles>
</Application>In XAML that uses the new controls, map the namespace with using::
xmlns:gpui="using:AvaloniaUIKit"On top of FluentTheme
GpuiTheme only themes the controls on the Compatibility page. 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:GpuiTheme />
</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.