StellarAdmin

Add to existing project

The following installation instructions assume you are adding StellarAdmin to an existing ASP.NET Core MVC or Razor Pages project.

Install package

Install the StellarAdmin.TagHelpers NuGet package.

dotnet add package StellarAdmin.TagHelpers

Register services

Update your Program.cs (or Startup.cs) to register the StellarAdmin services.

using StellarAdmin;
using StellarAdmin.TagHelpers;

builder.Services.AddStellarAdmin().AddTagHelpers();

Update imports

Update your _ViewImports.cshtml to register the StellarAdmin Tag Helpers and import the StellarAdmin.TagHelpers namespace.

@using StellarAdmin.TagHelpers
@addTagHelper *, StellarAdmin.TagHelpers

Add stylesheet and JavaScript file

StellarAdmin Tag Helpers includes eight shadcn-derived themes—Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea—and the independently designed Concourse, Ice, and Ledger themes. You must add the stylesheet for the theme you want to use to your Razor layout. The URL for the theme is in the format (/_content/StellarAdmin.TagHelpers/stellar-admin.<theme>.css).

StellarAdmin TagHelpers also comes with minimal JavaScript which adds interactivity to some of the Tag Helpers via Web Components. To enable this, you must also include the stellar-admin.js script in your layout.

The example below demonstrates how to include the script and the stylesheet for the Nova theme.

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="/_content/StellarAdmin.TagHelpers/stellar-admin.nova.css" asp-append-version="true"/>
    <script defer src="/_content/StellarAdmin.TagHelpers/stellar-admin.js" asp-append-version="true"></script>
</head>
<body>
    ...
</body>
</html>

All the Tag Helper examples in the rest of this documentation allows you to preview the examples in each of the different themes. Just select the Theme picker above any of the examples.

You can also go the shadcn/ui Create page and use their Style picker, which correspond with the StellarAdmin themes. This will give you a good idea of the look-and-feel of each of the themes.

Start using the Tag Helpers

Start using the StellarAdmin Tag Helpers inside your Razor Pages or MVC Views. For example, the code snippet below adds an alert to your page.

<sa-alert>
    <sa-alert-title>Success! You have configured StellarAdmin correctly.</sa-alert-title>
</sa-alert>

Before you start using the components, read the Conventions page. It covers the rules every Tag Helper follows for attribute pass-through, custom classes, model binding and links.

Starter Templates

Coming soon...

Installation