Web UI

Web UI

🎨 See it running → birko-framework.github.io/Birko.Web.Playground

Every <b-*> component live, with its attributes wired to controls so you can flip them and watch the instance react. The same page edits the --b-* design tokens and restyles the whole gallery as you type, then exports a paste-ready theme CSS file. Nothing to install — it is the fastest way to find out whether this library suits you.

Birko.Web is a separate repository: Birko-Framework/Birko.Web. It is TypeScript, not .NET, and it is built with esbuild rather than MSBuild.

Four packages:

Package	What it is
birko-web-core	the mini-framework: Web Components, state, HTTP, router, i18n
birko-web-components	~75 <b-*> components
birko-web-shell	a ready-made application shell
birko-web-testing	test helpers

The idea

Web Components with Shadow DOM. No React, no virtual DOM, no build-time magic — components are classes, styles are scoped, and the browser does the rest.

birko-web-core           BaseComponent, i18n, t, useI18n
birko-web-core/state     Signal, Store, persistSet/Get, sessionSet/Get
birko-web-core/http      ApiClient, SseClient, PagedResult, apiErrorMessage
birko-web-core/router    Router, link
birko-web-core/storage   IndexedDbStore, CacheStore

The shell

Most apps want chrome — navigation, theme, user menu, breadcrumbs. birko-web-shell gives you three levels, and you pick how much you want:

Class	Gives you	Abstract methods
BCoreAppShell	theme and layout persistence, online/offline, user dropdown, breadcrumbs	4
BSidebarAppShell	+ optional left and/or right sidebars	4
BAppShell	+ Office-style ribbon, notifications, status bar, tenant switcher, command palette	7

Extend the one you want, implement its abstract methods, and the layout, CSS and behaviour come with it. There are factory helpers for auth, modules, tenants, notifications, routing and the command palette.

class MyAppShell extends BAppShell {
  // implement the abstract methods — modules, branding, user, etc.
}

Finding the source

TypeScript builds resolve a separate bucket from the .NET side:

C:\Source\Birko\
├── Framework\     ← MSBuild resolves $(BirkoSrc) here
└── Web\           ← esbuild walks up to find this, or honours BIRKO_SRC

So the two build systems look in sibling directories. If your bundler cannot find birko-web-core, that resolution is the first thing to check.

Seeing it work

Birko.Web.Playground renders the component catalogue and has a headless verification harness — the quickest way to see what the 75 components look like and how they behave.

Design tokens

Birko.DesignTokens is the single source for colours, spacing and typography. It generates both the CSS for birko-web-components and the AXAML for Desktop XAML, so a web app and a desktop app share one visual language.

⚠️ The generated CSS and AXAML are outputs — edit tokens.json and regenerate. A CI gate compares the committed files against a fresh generation, because editing the generated file directly has silently been undone twice.

Next

• Desktop XAML — the same design system on the desktop
• Communication — the .NET side your frontend calls