Introduction

A first component

The name and the count are plain fields on the component: a press runs C#, and the live diff redraws what changed.

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class IntroductionExample : Component
{
    private string? _name = "Ada";
    private int _saves;

    protected override Component? Render() =>
        Ui.Card.Class("max-w-md space-y-6")[
            Div[
                Ui.Heading.Level(3).Lg["Update profile"],
                Ui.Text.Class("mt-2")["Make changes to your personal details."]
            ],
            Ui.Input.Value(_name).OnChange(name => _name = name).Label("Name").Placeholder("Your name"),
            Div.Class("flex items-center gap-2")[
                Ui.Text.Sm.Subtle[_saves == 0 ? "Not saved yet." : $"Saved {_saves}× as {_name}."],
                Ui.Spacer,
                Ui.Button.Ghost.OnClick(() => { _name = ""; })["Clear"],
                Ui.Button.Primary.OnClick(() => { _saves++; })["Save"]
            ]
        ];
}

Install

An app made with rask new has it already: the template imports the kit into its one stylesheet and turns its theme on. Anywhere else, add the package:

dotnet add package Rask.Ui

Every component is reached from Ui, in the Rask namespace every template already imports: Ui.Button.Primary["Save"].

Wiring a host by hand

Only for a host wired with AddRask() and MapRask<App>(), or an App that writes its own shell. Two things, and forgetting either draws the right markup with no style.

First, take the kit into the app's stylesheet, in place of @import "tailwindcss";. The build writes the kit's Tailwind sources beside it before Tailwind runs, so the one sheet the app compiles carries the kit's theme, its dark variant and every class its components write:

@import "./vendor/rask-ui.css";

Link that sheet, and nothing else:

protected override Component? HeadAssets =>
[
    Ui.AppearanceScript,
    Link.Rel("stylesheet").Href(LiveOptions.PathBase + "/css/app.css"),
];

Second, turn the theme on. Nothing has a colour until an ancestor carries the theme scope, so referencing the package cannot repaint an app that only wanted one button:

protected override Component Shell(Component head, Component body) =>
    Html.Lang("en").Attributes((UiStylesheet.ThemeScopeAttribute, ""))[head, body];

How it follows Flux UI

Each component is built from Flux UI's public docs — every example on its page, measured in a browser in light and dark — and a parity test holds it to them. The names carry over by rule:

What Flux does with a script, Rask.Ui leaves to the browser where it can: a modal is a <dialog>, a menu a popover, a sidebar a checkbox, so they work on a prerendered page before anything has loaded. Components bring their padding, borders and colour, never an outer margin: the page spaces them.

Next