TKCode.Arc 0.3.0-preview.1

TKCode.Arc

English | 简体中文

Arc-style components for Avalonia, built on AtomUI. TKCode.Arc ports the free components of Arc — 110 components in 22 groups — with Arc's visual language and spring motion.

• Targets net10.0 and net11.0; desktop (Windows, macOS, Linux).
• Depends on AtomUI 6.2.8 and Avalonia 12.1.4 (exact versions), and on StreamMark for Markdown and code highlighting.
• Design documents: design/overview.md.
• Live demo: https://docs.tkcode.si/ (the gallery of every component, in the browser).

Packages

Install

The latest preview is 0.3.0-preview.1 on NuGet:

dotnet add package TKCode.Arc --version 0.3.0-preview.1
dotnet add package TKCode.Arc.Fonts --version 0.3.0-preview.1           # optional: Geist and Geist Mono
dotnet add package TKCode.Arc.Icons.Lucide --version 0.3.0-preview.1    # optional: the full Lucide set

TKCode.Arc brings in TKCode.Arc.Core. TKCode.Arc.Blocks and TKCode.Arc.AdvancedCharts are built from this repository and are not published on NuGet yet. Versions carry a -preview suffix, so the API may still change between releases.

Getting started

AppBuilder.Configure<App>()
    .UsePlatformDetect()
    .WithInterFont()
    .WithArcFonts()          // optional: Geist display type and Geist Mono code type
    .UseAtomUI(builder =>
    {
        builder.UseDesktopControls();
        builder.UseArc();
    });

public partial class App : Application { }

<Window xmlns:arc="https://github.com/AtomUICommunity/TKCode.Arc">
  <StackPanel Spacing="12">
    <arc:Button Content="Save changes" />
    <arc:Button Content="Cancel" Variant="Secondary" />
    <arc:Switch Content="Email notifications" IsChecked="True" />
    <arc:CopyButton Value="npx arc add copy-button" />
    <arc:Button Content="Share" arc:Tooltip.Tip="Copy link" />
    <arc:Calendar ShowToday="True" />
  </StackPanel>
</Window>

Icons: Arc's built-in glyphs ({x:Static arc:ArcIcons.Check}) cover every icon the components use; any other Lucide icon comes from the icons package:

<Window xmlns:lucide="https://github.com/AtomUICommunity/TKCode.Arc/lucide">
  <lucide:LucideIcon Kind="Sparkles" Size="20" />
</Window>

Accent, appearance and motion level:

var config = new ThemeConfigBuilder()
    .WithAlgorithms(ThemeAlgorithm.Default, ThemeAlgorithm.Dark)
    .WithArc(arc => arc.Accent(ArcAccentPreset.Violet))
    .Build();
await Application.Current!.GetThemeManager()!.ApplyThemeAsync(
    new ThemeRequest(IThemeManager.DEFAULT_THEME_ID, config, ThemeTransitionReason.UserRequest));

ArcMotion.SetLevel(window, ArcMotionLevel.Reduced);   // Full, Reduced or Off

Markdown and code: CodeBlock highlights out of the box (TextMate grammars painted in Arc's palette), and Markdown renders a document or a streamed reply with the same styling:

var reply = new Markdown();
reply.Append("Here is the **fix**:\n\n```csharp\n");
reply.Append("var total = items.Sum(i => i.Price);\n```\n");
reply.Complete();

Notes for applications:

• Do not enable InvariantGlobalization (number and date formatting needs culture data).
• Anchored popups (menus, selects, tooltips, popovers) are drawn in the window's overlay layer, so they sit exactly sideOffset away from their trigger and never cover it.
• Button, Calendar, Carousel, ContextMenu, DatePicker, Slider, SplitButton, TabItem, TimePicker, TreeView and TreeViewItem share names with Avalonia.Controls; alias one namespace when a file imports both.

Building

Requires the .NET 11 SDK (see global.json) and the .NET 10 runtime (AtomUI build tasks run on it).

dotnet build TKCode.Arc.slnx
dotnet test tests/TKCode.Arc.Core.Tests
dotnet test tests/TKCode.Arc.Tests
dotnet run --project gallery/TKCode.Arc.Gallery.Desktop -f net10.0

Sponsors

TKCode.Arc is mainly sponsored by nextco.work, which provides affordable, easy-to-use access to Claude, OpenAI and DeepSeek models. Thank you for supporting the project.

License

MIT. See THIRD-PARTY-NOTICES.md for Arc (MIT), Lucide (ISC), fonts (OFL), StreamMark, TextMateSharp, Oniguruma and Markdig, and the AtomUI (LGPL-3.0) dependency.