Gitter NuGet downloads Discord


Control's Library for Avalonia


  • Controls Availables

    • AuraTabItem
    • AuraTabView
    • SuperColorPicker
    • ColorPickerButton
    • PagesView
    • GroupBox
    • FilledSlider
    • ModernSlider
    • Ribbon
    • SuperListBoxItem
  • Controls in Developing

    • GradientEditor : This control creates a GradientBrush to use in other controls.
    • NavigationView : A scrollable MenuItems, like UWP NavigationView.
    • Follower : This Control follow the cursor whitin a control.
    • ColourSlider : This slider has colors as values.
    • ProgressRing : This is similar to progressbar, but is indefinite.
  • Windows Availables

    • ColorWindowSmall : This window shows a ColorPicker.
  • Windows in Developing:

    • ChangeColorWindow : This window creates a SolidColorBrush or GradientBrush.
  • Planned Controls and Windows for future versions:

    • TabbedWindow : An optimized window to use with AuraTabItems.
    • StatusBar : This bar shows an status of application, it will use a class for the status.
    • WriteablePanel : A panel por represent and edit images easily.
  • UI Extensions

    • TabControlExtensions:

      CloseTab(this TabControl tabControl, TabItem tabItem) //CloseTab with itself
      CloseTab(this TabControl tabControl, int index) //CLoses Tab with index
      AddTab(this TabControl tabControl, TabItem TabItemToAdd,bool Focus)
      //Add a Tab 
    • TemplatedControlExtensions:

      GetControl<T>(this TemplatedControl templatedControl ,TemplateAppliedEventArgs e, string name) where T : AvaloniaObject
      //Return an AvaloniaObject from Template
    • LogicalExtensions:

      GetParentTOfLogical<T>(this ILogical Logical) where T : class {}
      // Return the closest logical parent
      GetParentTOfLogical<T>(this ILogical Logical) where T : class {}
      // Return the closest window parent
    • Extensions in Developing

      <!--RevealExtension ==> This extension for xaml create a RevealEffect for a Brush Property-->
      <Button Background={Reveal TintColor=Gray, CursorRadius=20, Opacity=0.5}></Button>


Now the library is available in

First Step

Go to the next link: .

Second Step

Install Aura.UI with Visual Studio or dotnetCLI:

Visual Studio

Open the Nuget Packages Manager on your project and search Aura.UI.

Dotnet CLI

Open the terminal on the root folder of your project and write

dotnet add package Aura.UI --version 0.1.3-preview3

Do it like this:


Add Styles to App.xaml

  <Application  xmlns=""
        <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
        <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseDark.xaml"/>
       <StyleInclude Source="avares://Aura.UI/AuraUI.xaml"/> <!-- Add this Source --> 
       <StyleInclude Source="avares://Aura.UI/AuraAcrylicBase.xaml"/> <!--When you use a controls with IMaterial Interface , you should add this source-->

Next add this using instructions:

using Aura.UI.Controls;
using Aura.UI.UIExtensions;
using Aura.UI.Windows;



A Closable TabItem what has extra features.


Is similar to TabControl, but this can add new tabs with a built-in button, also its tabs reduce its width when the spacing is little.


Similar to GroupBox, but has 2 buttons and is easy-to-custom.


This color picker can modify the opacity and the color of a SolidColorBrush, and let you see a preview, too.

## ColorPickerButton A Toggle Button when you click it, shows a ColorPicker on a Window.


A Pages Collection for simplify the life.


This Slider imitates the Android Slider, but uses the Acrylic Textures!


This Control has a header and that show it in the top.

Ribbon (Preview)

This control shows a Ribbon, and use its own subcontrols.

Ribbon SubControls:

  • RibbonItem : It's the principal content selector, has a header and the content property.

  • RibbonPanel : This panel must be into the RibbonItem Content, organizes the RibbonGroups.

  • RibbonGroup : This HeaderedContentControl organizes the groups of the RibbonItem.

  • RibbonSeparator : This control separates the RibbonGroups.

    The default height of the container is 150, but if you want to change it, you have to edit the follow resource:

    <ParentWindow xmlns:ms="clr-namespace:System;assembly=netstandard">
        <ms:Double x:Key="DefaultRibbonContainerHeight">200</ms:Double>


   <Border Padding="10">
            <ms:Double x:Key="DefaultRibbonContainerHeight">170</ms:Double>
        <Ribbon Header="HeaderTest" LeftContent="File" RightContent="Settings" ExpansionState="Total">
            <RibbonItem Header="Start">
                    <RibbonGroup Header="Colour">
                        <Border Background="Yellow" Height="90" Width="100"/>
                    <RibbonGroup Header="Themes">
                        <StackPanel Orientation="Horizontal">
                            <Border Background="Black" Width="60" Height="90"/>
                            <Border Background="White" Width="60" Height="90"/>
                    <RibbonGroup Header="Fonts">
                        <StackPanel Spacing="10">
                            <TextBlock FontSize="20">Ribbon</TextBlock>
                            <TextBlock FontSize="14">Ribbon</TextBlock>
                            <TextBlock FontSize="10">Ribbon</TextBlock>
            <RibbonItem Header="Edit">

This xaml code produces this result:


This ListBoxItem has a Icon and styled texts.

About Aura.UI

This library is open source and free, in a few months come out the first stable version,for now, Aura.UI is a beta.

How To Collaborate

If you want to collaborate with this proyect, contact me with the next links:

  • Whatsapp
  • Messenger
  • Gitter


A Library with a lot of Controls for AvaloniaUI

Aura.ui Info

⭐ Stars 274
🔗 Source Code
🕒 Last Update 4 months ago
🕒 Created 2 years ago
🐞 Open Issues 9
➗ Star-Issue Ratio 30
😎 Author PieroCastillo