Components

The RCL ships the full AdminLTE widget set as Blazor components. Below is a reference of each widget with its key parameters, plus real usage snippets for the most common ones.

Widget reference

Component	Key parameters
`Card`	`Title`, `Icon`, `Theme`, `Variant` (`default`/`outline`/`solid`), `Collapsible`, `Maximizable`, `Removable`, `Tools`, `HeaderContent`, `FooterContent`, `ChildContent`
`SmallBox`	`Title`, `Text`, `Icon`, `Theme`, `Url`, `UrlText`
`InfoBox`	`Title`, `Text`, `Icon`, `Theme`, `IconTheme`, `Variant` (`default`/`solid`), `Unit`, `Progress`, `ProgressText`
`Alert`	`Theme`, `Title`, `Icon`, `Dismissible`, `OnDismiss`
`Callout`	`Theme`, `Title`
`Progress`	`Value`, `Max`, `Theme`, `Size`, `Striped`, `Animated`, `ShowLabel`, `Height`
`ProgressGroup`	`Label`, `Value`, `Max`, `Theme`
`Ratings`	`Value` (supports halves), `Max`, `Theme`, `ShowText`
`Timeline`	`Items` (`Timeline.Entry`: `Time`, `Icon`, `IconTheme`, `Title`, `Url`, `Body`, `Footer`)
`Breadcrumb`	`Items` (`Breadcrumb.Crumb(Label, Href?)`), `Class`
`ProfileCard`	`Name`, `Title`, `Image`, `Stats` (`Stat`), `Socials` (`Social`)
`DescriptionBlock`	`Header`, `Text`, `Icon`, `IconTheme`, `Percentage`
`DirectChat`	`Title`, `Theme`, `Badge`, `Messages`, `Contacts`, `FooterContent`
`Tabs` / `Tab`	`Tabs`: `ActiveId`, `Pills`, `Justified` · `Tab`: `Id`, `Title`, `Icon`, `Disabled`
`Accordion` / `AccordionItem`	`Accordion`: `Flush`, `AlwaysOpen` · `AccordionItem`: `Id`, `Title`, `DefaultOpen`

SmallBox

<div class="col-lg-3 col-6">
    <SmallBox Theme="primary" Title="150" Text="New Orders" Icon="bi-bag-fill" Url="/orders" />
</div>

InfoBox

<InfoBox Text="CPU Traffic" Title="90" Unit="%" Icon="bi-cpu-fill"
         Theme="danger" Progress="70" ProgressText="Increased by 12% this week" />

Card with tools and a footer

A Card may have a header (title or HeaderContent), a Tools slot for extra header buttons, a body and a FooterContent slot. Variant="outline" draws a colored top border; Variant="solid" fills the card with the theme color.

<Card Title="Monthly Recap" Icon="bi-bar-chart" Theme="primary" Variant="outline"
      Collapsible="true" Maximizable="true">
    <ChildContent>
        <Progress Value="80" Theme="success" ShowLabel="true" />
    </ChildContent>
    <FooterContent>
        <Button Theme="primary" Icon="bi-download" Label="Export" />
    </FooterContent>
</Card>

The <ChildContent> rule. When a component has a default ChildContent body and you also use a named slot like <Tools>, <HeaderContent> or <FooterContent>, you must wrap the body explicitly in <ChildContent>...</ChildContent>. Mixing a named slot with loose top-level markup is a Razor compile error.

Tabs

Tab children register themselves with the parent Tabs; each needs a unique Id and a Title. The first tab is active by default, or bind ActiveId.

<Tabs Pills="true">
    <Tab Id="overview" Title="Overview" Icon="bi-grid">Overview pane</Tab>
    <Tab Id="activity" Title="Activity">Activity pane</Tab>
</Tabs>

Timeline

<Timeline Items="_events" />

@code {
    private readonly IReadOnlyList<Timeline.Entry> _events =
    [
        new() { Time = "12:05", Icon = "bi-envelope", IconTheme = "primary",
                Title = "Support ticket #4521", Body = "Customer reported a login issue." },
    ];
}

AdminLTE 4 · ASP.NET port Edit on GitHub