2.1 KiB
SufiBlazor Installation
This page explains how to add SufiBlazor to a Blazor application. The same installation flow works whether you are using Sufi Platform, ABP, or a plain ASP.NET Core 10+ Blazor project.
Add the package
Add the package to the Blazor project that will render the UI:
dotnet add package SufiChain.SufiBlazor
Add the static assets
Add the stylesheet to the application head:
<link href="_content/SufiChain.SufiBlazor/sufiblazor.css" rel="stylesheet" />
Add the script before the closing </body> if your project uses the JavaScript-backed behaviors:
<script src="_content/SufiChain.SufiBlazor/sufiblazor.js"></script>
Add the namespaces
In _Imports.razor, add the namespaces your app uses most often. A typical starting point is:
@using SufiChain.SufiBlazor
@using SufiChain.SufiBlazor.Components
@using SufiChain.SufiBlazor.Theming
You can add more specific component namespaces as your project grows.
Wrap the app with the theme provider
Wrap the application root or root layout with SbThemeProvider so the components receive theme and direction context:
<SbThemeProvider IsDark="false" Direction="SbDirection.Ltr">
<Router AppAssembly="@typeof(App).Assembly">
...
</Router>
</SbThemeProvider>
This step matters even in plain Blazor apps because the component library expects a shared theme and direction context.
Verify the setup
Create a simple page with a few components such as SbCard, SbButton, and SbAlert. If the styles load and the components render correctly, the library is wired in.
Inside Sufi Platform
If the host already uses Sufi Platform conventions:
- SufiBlazor is usually part of the expected UI stack already
- Wish Theme builds on top of SufiBlazor rather than replacing it
- the same package, static asset, and theme-provider concepts still apply
Optional notes
- If your app uses dialog, toast, or similar UI services, follow the host-specific registration guidance used by your application.
- If Wish Theme is part of the host, it still depends on SufiBlazor as the base component system.