Razor and C# API

<ds-button variant="primary" icon="send" loading-label="Sending…" type="submit">Send invoice</ds-button>
<ds-icon-button icon="trash" label="Delete invoice INV-2026-0418" variant="tonal" />
<ds-toggle-group type="single" label="View" name="view" value="list">
    <ds-toggle-item value="list" icon="list">List</ds-toggle-item>
    <ds-toggle-item value="grid" icon="layout-grid">Grid</ds-toggle-item>
</ds-toggle-group>

<ds-field asp-for="Name" label="Project name" hint="Shown in lists and invoices." />
<ds-field asp-for="Budget" type="number" label="Budget" prefix="$" step="0.01" />
<ds-field asp-for="Owner" type="select" asp-items="Model.Owners" label="Owner" />
<ds-checkbox asp-for="AcceptTerms" label="I accept the terms" />
<ds-radio-group asp-for="Plan" asp-items="Model.Plans" label="Plan" card columns="2" />
<ds-slider asp-for="Volume" label="Volume" min="0" max="100" step="5" format="{value}%" />
<ds-date-range-picker start-for="From" end-for="To" legend="Billing period" presets="last7,last30,thisMonth" />

<ds-avatar name="Ayu Lestari" size="md" shape="circle" presence="online" />
<ds-status tone="Warning">Awaiting approval</ds-status>
<ds-chip variant="Filter" pressed count="12">Overdue</ds-chip>
<ds-stat label="Open projects" value="24" delta="+3" trend="Up" icon="briefcase" />
<ds-card title="Website redesign" eyebrow="PRJ-1024" href="/projects/1024">
    Updated 2 Nov 2026.
    <ds-card-footer><ds-status tone="Success">Active</ds-status></ds-card-footer>
</ds-card>
<ds-sparkline values="@(new double[] { 12, 14, 13, 18, 21 })" label="Orders, last 5 days: from 12 to 21" />

<ds-alert tone="Warning" title="Storage almost full" dismissible>
    You have used 92% of 50 GB.
    <ds-alert-actions><a class="btn btn-sm" href="/billing">Upgrade</a></ds-alert-actions>
</ds-alert>
<button class="btn" ds-tooltip="Delete" ds-tooltip-placement="bottom">Delete</button>
<ds-progress value="62" label="Import" show-value tone="Success" />
<ds-empty icon="receipt" title="No invoices yet" action-label="Create invoice" action-href="/Invoices/Create" boxed>
    Invoices you create appear here.
</ds-empty>

<button class="btn" data-ds-dialog-open="invite">Invite</button>
<ds-dialog id="invite" title="Invite a teammate" size="md" dismissible>
    <ds-field name="email" type="email" label="Email" />
    <ds-dialog-footer>
        <button class="btn" data-ds-dialog-close>Cancel</button>
        <button class="btn btn-primary">Send invite</button>
    </ds-dialog-footer>
</ds-dialog>
<ds-menu id="row-menu" label="Actions for INV-2026-0418" align="end">
    <ds-menu-item icon="pencil" shortcut="E">Edit</ds-menu-item>
    <ds-menu-separator />
    <ds-menu-item icon="trash" danger>Delete</ds-menu-item>
</ds-menu>

<ds-tabs label="Project sections">
    <ds-tab id="overview" label="Overview" icon="home">Overview panel.</ds-tab>
    <ds-tab id="files" label="Files" count="12">Files panel.</ds-tab>
</ds-tabs>
<ds-breadcrumb>
    <ds-breadcrumb-item href="/" icon="home">Home</ds-breadcrumb-item>
    <ds-breadcrumb-item href="/projects">Projects</ds-breadcrumb-item>
    <ds-breadcrumb-item>PRJ-1024</ds-breadcrumb-item>
</ds-breadcrumb>
<ds-pagination page="3" page-count="12" />
<ds-language-switcher languages="en,id" current="@lang" href-template="/{0}/pricing" />

<ds-container size="lg">
    <ds-page-header title="Invoices" description="Sent, paid and overdue." sticky>
        <ds-page-header-actions>
            <ds-button variant="primary" icon="plus" href="/Invoices/Create">New invoice</ds-button>
        </ds-page-header-actions>
    </ds-page-header>
    <ds-accordion single>
        <ds-accordion-item title="Billing" open>Billing details.</ds-accordion-item>
        <ds-accordion-item title="Shipping">Shipping details.</ds-accordion-item>
    </ds-accordion>
</ds-container>

<ds-icon name="briefcase" size="lg" />
<ds-icon name="alert" label="Warning" />

<partial name="_DsHead" model='new HeadOptions(Stylesheet: "~/css/app.css", Storage: "app")' />
<partial name="_DsSortHeader" model='new SortHeaderModel("Budget", "budget", Model.Rows.Sort, Numeric: true)' />
<partial name="_DsPager" model='Model.Rows.Pager("projects")' />
<partial name="_DsSidebarNav" model="Model.Nav" />

public static (string Label, Tone Tone) Status(InvoiceStatus s) => s switch
{
    InvoiceStatus.Draft => ("Draft", Tone.Neutral),
    InvoiceStatus.Sent => ("Awaiting payment", Tone.Warning),
    InvoiceStatus.Paid => ("Paid", Tone.Success),
    InvoiceStatus.Overdue => ("Overdue", Tone.Error),
    _ => ("Unknown", Tone.Neutral),
};

[HttpPost, ValidateAntiForgeryToken]
public async Task<IActionResult> Save(ProjectForm form)
{
    if (!ModelState.IsValid) return View("Form", form);
    await _projects.SaveAsync(form);
    this.Toast(Tone.Success, "Project saved", $"{form.Code} is ready.");
    return RedirectToAction(nameof(Index));
}

static readonly string[] Sortable = ["code", "name", "budget"];

public async Task OnGetAsync(string? q, string? sort, string? direction, int page = 1, int? size = null)
{
    var order = ListSort.Parse(sort, direction, Sortable, defaultKey: "code");
    var pageSize = PageSizes.Normalize(size);
    var (rows, total) = await _projects.SearchAsync(q, order, page, pageSize);
    Rows = new ListPage<ProjectRow>(rows, q, page, pageSize, total, order);
}

<span class="ds-avatar @Avatar.ColorClass(user.Name)">@Avatar.Initials(user.Name)</span>

// Program.cs
DsText.Add("id", new Dictionary<string, string> { ["pager.next"] = "Lanjut" });
DsText.Add("ms", new Dictionary<string, string> { ["pager.next"] = "Seterusnya" });

builder.Services.Configure<RequestLocalizationOptions>(o =>
{
    o.SetDefaultCulture("en");
    o.AddSupportedCultures("en", "id").AddSupportedUICultures("en", "id");
});
app.UseRequestLocalization();