eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
Email Rendering
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
Diagnostics
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
Diagnostics-pt-BR
EmailRealizer-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
DocsStart here
Getting Started
Edit this page
3 min read
🌐 This page in: English · Português
Not ready to install anything? Try it in the playground, the same compiler, in your browser.
Three commands, no Node, no bundlers, no JavaScript:
1
dotnet new install eQuantic.UI.Templates
1
dotnet new equantic-app -n MyApp
1
cd MyApp && dotnet run
Open the printed URL: a themed, server-rendered page whose counter is a C# component: a state field, a handler, and a Build method. The build compiled it to JavaScript for you (the embedded toolchain does the bundling; there is nothing to install).
What the template gives you
1
2
3
4
5
6
7
8
9
10
11
12
MyApp/
├─ MyApp.csproj # <Project Sdk="eQuantic.UI.Sdk">, that line IS the build pipeline
├─ global.json # pins the SDK version (stamped by the template)
├─ Program.cs # AddUI → UseTheme → MapUI, UseRequestLocalization for the cultures
├─ Components/
│ └─ StatTile.cs # your first component; its factory is generated from it
├─ Pages/
│ └─ HomePage.cs # [Page("/")], a write-once StatefulComponent
└─ Resources/
├─ Strings.resx # your strings: ordinary .NET resx, the only localization artifact
├─ Strings.pt-BR.resx
└─ Strings.Designer.cs
Pages are classes with [Page("/route")]. SSR, hydration, client-side navigation, a true 404 for unknown routes (declare [Page("/404")] to brand it), all wired.
Two languages from birth. The home page reads Strings.Tagline from the resx and renders a CultureSwitcher: click Português and the page re-renders in place, Contado {0} vezes. reformatting with the counter. Ship a third language by adding Strings.fr.resx and listing fr in UseRequestLocalization. See Localization for how the same class answers on the server, in the browser and in a native window.
Writing a tree needs no new and no import: `Column(gap: Space.S4, children: [ Text("Hi"), Button("Go") ]). Your own components join that surface automatically, and StatTile(…)` in the template is yours. See Declarative Surface.
Theming is one line: swap PhotonTheme.Instance for MaterialTheme.FromSeed(color) in Program.cs and every component rebrands, server and client.
Server data goes through [ServerAction] methods, called from the browser as ordinary C# awaits.
Hot reload: run with dotnet watch and save a file, and the browser updates with your page state replayed.
The same component source realizes NATIVELY on the Photon engine (macOS/iOS/Android shells). See Photon.
Starting from a shape instead of a blank page
Since 0.2.0-preview.31
The layout above is --shell blank, the default. Both templates take the parameter, and every shape it offers is ADAPTIVE — which is the point: a form factor is not a second project here, so the first screen a newcomer sees had better say so.
1
dotnet new equantic-app -n MyApp --shell dashboard
1
dotnet new equantic-native -n MyApp --shell tabs
equantic-app
What you get
blank
One page and a counter.
topnav
A header with links, and a second route to prove the router.
dashboard
A sidebar past 840dp, the same sections wrapped under the header below it.
equantic-native
What you get
blank
One screen and a counter.
tabs
Destinations in a bottom bar, standing up as a navigation rail past 600dp.
drawer
A sliding panel on a phone, docked beside the content past 840dp.
list-detail
One pane at a time on a phone, two side by side on a tablet.
A template per form factor would deny the write-once thesis on the first file a developer opens, so this is a dotnet new CHOICE on the two templates instead. The shape lives in ONE file — AppShell — and nothing else names it: on native, Program.cs says UseRoot<AppShell>() whichever you picked; on the web a shell is an ordinary component every page composes, so it has a generated factory like any other and a page writes AppShell("/", …). Swapping the shape later is one file, never the entry point.
The adaptive halves carry no listener and no second state: AdaptiveNode holds both trees, the web emits both behind build-time media queries (the right one is on screen at first paint, before any JavaScript runs) and Photon lays out the one that fits the window. See Write-once components.
Local/preview feeds
Until packages are on nuget.org, point a nuget.config at the feed that carries them:
1
2
3
4
5
<configuration>
<packageSources>
<add key="equantic" value="PATH-OR-URL-TO-FEED" />
</packageSources>
</configuration>