G
YouTube TikTok Games
Skip to content

About

Arc-style (uiarc.dev) component library for Avalonia, built on AtomUI

Resources

Stars

275 stars

Watchers

4 watching

Forks

Repository files navigation

TKCode.Arc

English | 简体中文

NuGet License: MIT

The visual language and spring motion of Arc, as native Avalonia controls.

TKCode.Arc is a UI kit for .NET applications on Avalonia 12. It ports Arc's 112 free components and adds what a full product needs around them: page-level blocks and whole screens, a spreadsheet-style data grid, a workflow canvas, IDE-style docking, a terminal, a PDF viewer, and audio and video playback.

Live gallery and documentation · Changelog

Why Arc

  • Native controls. Every control derives from Avalonia base types and uses public Avalonia APIs only.
  • One token system. Colors, radii, shadows and fonts come from design tokens, so light and dark, the eight accent presets and whole-theme packages apply across every control.
  • Motion built in. A spring engine drives the components, with Full, Reduced and Off levels for the whole app.
  • Ready for NativeAOT. The libraries are built as trimming and AOT compatible.
  • Documented in three languages. Each of the 400+ component and block pages has live examples and a generated API table, in English, 简体中文 and 繁體中文.
  • Readable by AI assistants. The site publishes llms.txt, every page as Markdown and an agent skill.

Quick start

Start from a template:

dotnet new install TKCode.Arc.Templates
dotnet new tkcode-arc -n MyApp          # add --layout sidebar|header|dock, --mvvm toolkit, --i18n, --tests ...
cd MyApp
dotnet run

Or add Arc to an existing Avalonia 12 app:

dotnet add package TKCode.Arc
using TKCode.Arc;

public static AppBuilder BuildAvaloniaApp() =>
    AppBuilder.Configure<App>()
              .UsePlatformDetect()
              .UseArc(arc => arc
                  .UseArcControls()   // Arc's controls, themes and design tokens
                  .WithTheme(t => t.Appearance(ArcAppearance.System).Accent(ArcAccentPreset.Neutral)));
<Window xmlns="https://github.com/avaloniaui"
        xmlns:arc="https://github.com/AIDotNet/TKCode.Arc">
    <arc:Button Content="Save" />
</Window>

Each further package registers itself in the same UseArc(...) call: UseArcBlocks(), UseArcSpecial(), UseArcAdvancedCharts(), UseArcMobile(), UseArcWorkflow(), UseArcDock(), UseArcPdf(), UseArcVideo(), UseArcPixelTheme() and UseArcCorners(). Change the theme at run time with ArcTheme.Apply(t => t.Appearance(...).Accent(...)).

What's inside

All 23 packages are released together on one version; keep them on the same one.

Components

Package Contents
TKCode.Arc The 112 components in Arc's 22 sidebar groups, plus layout panels and extras such as Markdown (with streaming), Form, TreeSelect, PropertyGrid, Cascader and TransferBox.
TKCode.Arc.Blocks Page-level compositions grouped as on uiarc.dev (AI, Agents, auth, settings, commerce, marketing, support and more), and whole screens: dashboards, projects, calendars, people and customers, inbox and support, commerce.
TKCode.Arc.AdvancedCharts DataGrid (range selection, inline editing, fill handle, clipboard, grouping, export), Sunburst, SankeyFlow, FunnelChart, RadarChart, RealtimeStream, RaceBarChart and WindRoseChart.
TKCode.Arc.Special Animated AI explainers, glass, docks and tabs, galleries, data widgets, type effects, cursor effects, playful controls, loaders, surfaces and illustrations.
TKCode.Arc.Mobile Touch-first controls with 44px touch targets.

Application features

Package Contents
TKCode.Arc.Workflow A canvas for showing, editing and running graphs of steps, with pan, zoom, auto-arrange and undo.
TKCode.Arc.Dock IDE-style tab groups and resizable splits, with keyboard navigation and layouts saved as JSON.
TKCode.Arc.Terminal TerminalView over libghostty-vt, with the native libraries bundled.
TKCode.Arc.Pdf, .Pdf.Native, .Pdf.Browser PdfViewer with thumbnails, outline, search, text selection and links, using PDFium on desktop and pdf.js on WebAssembly.
TKCode.Arc.Audio, .Audio.Native, .Audio.Browser The IAudioPlayer abstraction, with miniaudio on desktop and HTML audio on WebAssembly.
TKCode.Arc.Video, .Video.Native, .Video.Browser VideoPlayer and VideoSurface over each platform's own player (Media Foundation, AVFoundation, GStreamer on desktop, and the browser's video element on WebAssembly).

Theming and assets

Package Contents
TKCode.Arc.Themes.Pixel A pixel-art theme, in token overrides only.
TKCode.Arc.Themes.Corners A global corner style: square or scaled corners for every control.
TKCode.Arc.Icons.Lucide The full Lucide set. A source generator compiles in only the icons a project uses.
TKCode.Arc.Fonts Geist and Geist Mono, plus optional pixel fonts for the pixel theme.

Foundation and tooling

Package Contents
TKCode.Arc.Foundation The token, theme, language and package registration runtime. Depends on Avalonia only.
TKCode.Arc.Core ArcDesign tokens and palette, the motion engine, shared primitives and built-in Lucide glyphs.
TKCode.Arc.Templates dotnet new templates: a starter app, a cross-platform app, six finished apps (admin, AI chat, developer tool, workflow editor, project planner, analytics dashboard), a control library, and item templates for a page, window, dialog and control.

Status and compatibility

Arc follows Semantic Versioning: from 1.0.0 on, breaking API changes come only with a new major version, and a public member is never removed or renamed in one step (it stays as [Obsolete] for at least two stable releases). CHANGELOG.md lists each release and its migration notes.

.NET net8.0, net10.0 and net11.0. TKCode.Arc.Terminal targets net10.0 and net11.0.
Avalonia Avalonia 12.1.5 or any later 12.x release ([12.1.5, 13.0.0)), so apps can update Avalonia without waiting for an Arc release.
Desktop Windows, macOS and Linux.
Browser The gallery itself runs on WebAssembly, and audio, video and PDF have browser backends.
Mobile TKCode.Arc.Mobile is previewed in a desktop phone frame and is not yet verified on Android or iOS devices.

Repository

Path Contents
src/ The libraries above and their source generators. TKCode.Arc.A2UI, an A2UI 1.0 renderer, is in development and not yet on NuGet.
tests/ Unit, headless Avalonia and generator snapshot tests, with token and preset baselines.
templates/ The source of TKCode.Arc.Templates.
native/ Native shims and libraries for the terminal, audio and video.
tools/ Generators and scripts for icons, native libraries, templates, docs screenshots and packaging.
design/ The design notes and decisions, starting at design/overview.md.

The gallery and documentation site, with its desktop and browser hosts, the docs pages and the demos, is a separate repository: AIDotNet/ArcGallery. It builds against a checkout of this one.

Working on the library

Building needs the .NET 11 SDK (see global.json) and the .NET 10 runtime, which the tests run on.

dotnet build TKCode.Arc.slnx
dotnet test tests/TKCode.Arc.Core.Tests
dotnet test tests/TKCode.Arc.Foundation.Tests
dotnet test tests/TKCode.Arc.Tests --filter "FullyQualifiedName~ButtonTests"   # the whole suite takes 8 minutes or more

To run the gallery, clone ArcGallery next to this repository as ../ArcGallery (or anywhere, with ARC_ROOT pointing at this checkout) and run dotnet run --project gallery/TKCode.Arc.Gallery.Desktop -f net10.0 there.

PDFium and pdf.js are not committed: tools/pdf/sync-native.sh and tools/pdf/sync-pdfjs.sh download them and check their checksums. Without them the desktop gallery shows a simulated document in the PDF demos, and a browser build has no pdf.js to import.

Project rules and conventions are in AGENTS.md, and the guide to writing a component is design/engineering/implementation-guide.md.

Community

Ask questions and talk about Avalonia in the QQ group Avalonia入门交流群 (group number 922379598). Scan the code or search for the number.

QQ group QR code

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. Arc depends only on Avalonia (MIT) and MIT packages of its own, so closed-source applications can ship it in a single file or a NativeAOT build. THIRD-PARTY-NOTICES.md covers Arc (MIT), Lucide (ISC), fonts (OFL), StreamMark, TextMateSharp, Oniguruma and Markdig.

About

Arc-style (uiarc.dev) component library for Avalonia, built on AtomUI

Resources

Stars

275 stars

Watchers

4 watching

Forks

Releases

Packages

Contributors

Languages