0.2.0-beta.1 · MAUI and Avalonia

Beautiful native components you own.

ShellUI Native brings the shadcn/ui approach to .NET MAUI and Avalonia: the same design as ShellUI for Blazor, as plain C# controls that the CLI copies into your project. No package to depend on, nothing to fight.

Get started Browse components

dotnet tool install -g ShellUI.Native.CLI --prerelease

What's in ShellUI Native?

One design system on MAUI and Avalonia. Previews on this site are ShellUI for Blazor, which shares the design.

Notifications

Choose what Shewart Shepherd hears about.

Release emails

Mentions

<ui:Card>
    <ui:CardHeader Title="Notifications"
                   Description="Choose what Shewart Shepherd hears about." />
    <ui:CardContent>
        <VerticalStackLayout Spacing="8">
            <ui:Switch Label="Release emails" IsToggled="True" />
            <ui:Switch Label="Mentions" />
        </VerticalStackLayout>
    </ui:CardContent>
    <ui:CardFooter>
        <ui:Button Text="Cancel" Variant="Outline" Size="Sm" />
        <ui:Button Text="Save" Size="Sm" />
    </ui:CardFooter>
</ui:Card>

<ui:Card>
    <ui:CardHeader Title="Notifications"
                   Description="Choose what Shewart Shepherd hears about." />
    <ui:CardContent>
        <StackPanel Spacing="8">
            <ui:Switch Label="Release emails" IsToggled="True" />
            <ui:Switch Label="Mentions" />
        </StackPanel>
    </ui:CardContent>
    <ui:CardFooter>
        <ui:Button Text="Cancel" Variant="Outline" Size="Sm" />
        <ui:Button Text="Save" Size="Sm" />
    </ui:CardFooter>
</ui:Card>

One design, two platforms

The same components, properties and tokens on .NET MAUI and Avalonia, so a screen reads the same on both. Pick your platform once and every example follows.

Browse components →

Default

Secondary

Outline

Themes & dark mode

Every colour is a token. ShellTheme swaps the light and dark palettes at runtime, on both platforms.

Theming →

Forms & inputs

Inputs, selects, pickers, sliders and switches at one 40px row height, with a keyboard focus ring.

Form components →

Overlays

Dialog, sheet, drawer, dropdown, popover, tooltip and toast. Escape closes the top one, and dialogs keep focus inside.

Overlay components →

MyApp — shellui-native

$ shellui-native init

✓ Detected: Avalonia UI

Project: MyApp

✓ Installed: Shell.cs

✓ Created: shellui-native.json

✓ ShellUI Native initialized successfully!

$ shellui-native add dialog

✓ Installed 'dialog-trigger' (DialogTrigger.cs)

✓ Installed 'dialog-content' (DialogContent.cs)

… header, footer, title, description, close

✓ Installed 'dialog' (Dialog.cs)

Installed 10 component(s) successfully!

Copy and own

shellui-native add copies plain C# files into Components/UI, with everything they depend on. No runtime package: change any line you like.

Installation →

Keyboard first

A focus ring for keyboard users only, Enter and Space on every trigger, arrow keys in tabs, and focus trapped in dialogs.

All components →