Installation

Get Arcadia Controls running in your Blazor project in under 5 minutes.

Prerequisites

  • .NET 5.0 or later (recommended: .NET 9)
  • A Blazor Server, WebAssembly, or Auto project

Install Packages

Install the packages you need via NuGet. Each package is independent — only Arcadia.Core is a shared dependency.

# Charts + Dashboard Widgets (includes Core)
dotnet add package Arcadia.Charts

# High-performance DataGrid (includes Core)
dotnet add package Arcadia.DataGrid

# Drag-and-drop Dashboard Grid (includes Core)
dotnet add package Arcadia.DashboardKit

# 46 UI Components (includes Core)
dotnet add package Arcadia.UI

# Form Builder (includes Core)
dotnet add package Arcadia.FormBuilder

# Toast Notifications (includes Core)
dotnet add package Arcadia.Notifications

# Theme Engine (includes Core)
dotnet add package Arcadia.Theme

# Free standalone gauge (MIT)
dotnet add package Arcadia.Gauge

Add Stylesheets

Add the CSS files to your app's <head> (in App.razor or index.html):

<!-- Theme tokens (required) -->
<link href="_content/Arcadia.Theme/css/arcadia.css" rel="stylesheet" />

<!-- Charts styles -->
<link href="_content/Arcadia.Charts/css/arcadia-charts.css" rel="stylesheet" />

<!-- DataGrid styles -->
<link href="_content/Arcadia.DataGrid/css/arcadia-datagrid.css" rel="stylesheet" />

<!-- UI component styles -->
<link href="_content/Arcadia.UI/css/arcadia-ui.css" rel="stylesheet" />

<!-- Form styles -->
<link href="_content/Arcadia.FormBuilder/css/arcadia-forms.css" rel="stylesheet" />

<!-- Notification styles -->
<link href="_content/Arcadia.Notifications/css/arcadia-notifications.css" rel="stylesheet" />

Register Services

In your Program.cs, register the services you need:

using Arcadia.Theme;
using Arcadia.Notifications;

// Theme (required for ThemeProvider)
builder.Services.AddScoped<ThemeService>();

// Toast notifications
builder.Services.AddScoped<ToastService>();

Wrap Your App

Wrap your layout in ThemeProvider to enable theming across all components:

@using Arcadia.Theme

<ThemeProvider>
    @Body
</ThemeProvider>

Your First Component

Drop in a KPI card to verify everything works:

@using Arcadia.Charts.Components.Dashboard

<ArcadiaKpiCard Title="Revenue"
              Value="$142,500"
              Delta="+12.3%"
              DeltaType="DeltaType.Increase"
              Sparkline="@(new double[] 62)" />

Your First Chart

Add a line chart to any page — this is a complete, copy-paste-and-it-works example:

@page "/my-chart"
@using Arcadia.Charts.Core
@using Arcadia.Charts.Components.Charts

<ArcadiaLineChart TItem="SalesRecord" Data="@data"
                  XField="@(d => (object)d.Month)"
                  Series="@series"
                  Height="350" Width="0"
                  ShowPoints="true" AnimateOnLoad="true"
                  Title="Monthly Revenue" />

@code {
    record SalesRecord(string Month, double Revenue, double Target);

    List<SalesRecord> data = new()
    {
        new("Jan", 45000, 50000), new("Feb", 52000, 50000),
        new("Mar", 48000, 52000), new("Apr", 61000, 55000),
        new("May", 55000, 55000), new("Jun", 67000, 58000),
    };

    List<SeriesConfig<SalesRecord>> series = new()
    {
        new() { Name = "Revenue", Field = d => d.Revenue,
                Color = "success", ShowArea = true, CurveType = "smooth" },
        new() { Name = "Target", Field = d => d.Target,
                Color = "warning", Dashed = true },
    };
}

Width="0" makes the chart responsive — it fills its container automatically. All 20 chart types follow the same pattern: Data + field selectors + Series config.

Next steps

Check out the Quick Start guide for a complete dashboard example, or dive into Charts or Forms.