Revenue vs Target Last 12 months

Monthly Breakdown Q4 2025

Charts & Dashboards

Line, Bar, Pie, Scatter, Sparkline and more. Pure SVG rendering with animated transitions and full accessibility.

// Multi-series line chart
<ArcLineChart
Data="@salesData"
XField="@(d => d.Month)"
Series="@series"
ShowPoints="true"
Animate="true"
Height="300" />

Key Parameters

Data IEnumerable<T> data source for the chart

Series List of series definitions with color and label

XField Lambda expression for the X-axis value

Animate Enable on-load SVG animations (respects prefers-reduced-motion)

ShowPoints Render data point circles on the line

New Employee Registration

1

Personal

2

Role

3

Review

First Name

Sarah

Last Name

Chen

Email Address

sarah.chen@acme.com

Department

Engineering

Start Date

March 15, 2026

Send welcome email on registration

Cancel

Next Step

Form Builder

21 field types. Schema-driven or model-driven. Wizard forms with step validation, cross-field rules, and auto-save.

// Wizard form from a model
<ArcFormBuilder
Model="@employee"
Mode="FormMode.Wizard"
Steps="@steps"
OnSubmit="@HandleSubmit"
AutoSave="true"
ValidateOnStep="true" />

Key Parameters

Model Bound object; fields are inferred from data annotations

Mode Single, Wizard, or Inline editing mode

Steps List of wizard step definitions with field groupings

OnSubmit EventCallback fired after successful validation

AutoSave Persist form state to browser storage on field change

Notification Stack

Deployment Complete

v2.4.1 deployed to production successfully

2s ago

High Memory Usage

Server node-3 at 87% memory utilization

15s ago

Payment Failed

Invoice #4821 — card declined, retry in 30 min

1m ago

New Team Member

Sarah Chen joined the Engineering team

5m ago

Auto-dismiss in 5s 4 notifications

Notifications

Toast notifications with auto-dismiss, stacking, 4 severity levels, custom positioning, and full ARIA live region support.

// Inject and fire a toast
@inject IArcToastService Toast
<ArcToastContainer
Position="ToastPosition.TopRight"
MaxVisible="5"
AutoDismiss="TimeSpan.FromSeconds(5)" />
// In your code:
Toast.Show("Deployed!",
Severity.Success);

Key Parameters

Position TopRight, TopLeft, BottomRight, BottomLeft, TopCenter, BottomCenter

MaxVisible Maximum toasts displayed simultaneously (overflow queued)

AutoDismiss Duration before automatic dismissal; null for sticky

Severity Success, Warning, Error, or Info — sets icon and color

Theme Tokens

Primary

Accent

Success

Warning

Danger

Dark Mode

Light Mode

Density Modes

Compact

Field

Save

Normal

Field

Save

Spacious

Field

Save

Theme Engine

CSS custom property tokens. Light and dark themes out of the box. 3 density modes. Tailwind CSS 4.x plugin included.

// Configure theming at app startup
<ArcThemeProvider
Theme="ArcTheme.Dark"
Density="Density.Normal"
PrimaryColor="#8b5cf6"
AccentColor="#ec4899"
BorderRadius="8">
@* All Arcadia components inherit *@
<Router AppAssembly="..." />
</ArcThemeProvider>

Key Parameters

Theme Dark, Light, or Auto (follows system preference)

Density Compact, Normal, or Spacious — controls spacing and sizing

PrimaryColor Hex color; auto-generates full shade palette via CSS

BorderRadius Base border radius in pixels; all components scale from this

Want the full interactive demo?

Run the demo app locally to try every component with live data, animations, and theme switching.

# Clone and run the interactive demo git clone https://github.com/helixuidev/arcadia.git cd arcadia dotnet run --project samples/Arcadia.Demo.Server

View on GitHub Read the Docs

Component Showcase

Charts & Dashboards

Key Parameters

Form Builder

Key Parameters

Notifications

Key Parameters

Theme Engine

Key Parameters

Want the full interactive demo?