Consume ASP.NET Core Razor components from Razor class libraries

Components can be shared in a Razor class library (RCL) across projects. Include components and static assets in an app from:

  • Another project in the solution.
  • A referenced .NET library.
  • A NuGet package.

Just as components are regular .NET types, components provided by an RCL are normal .NET assemblies.

Create an RCL

  1. Create a new project.
  2. In the Create a new project dialog, select Razor Class Library from the list of ASP.NET Core project templates. Select Next.
  3. In the Configure your new project dialog, provide a project name in the Project name field or accept the default project name. Examples in this topic use the project name ComponentLibrary. Select Create.
  4. In the Create a new Razor class library dialog, select Create.
  5. Add the RCL to a solution:
    1. Open the solution.
    2. Right-click the solution in Solution Explorer. Select Add > Existing Project.
    3. Navigate to the RCL's project file.
    4. Select the RCL's project file (.csproj).
  6. Add a reference to the RCL from the app:
    1. Right-click the app project. Select Add > Project Reference.
    2. Select the RCL project. Select OK.

If the Support pages and views checkbox is selected to support pages and views when generating the RCL from the template:

  • Add an _Imports.razor file to root of the generated RCL project with the following contents to enable Razor component authoring:

    @using Microsoft.AspNetCore.Components.Web
    
  • Add the following SupportedPlatform item to the project file (.csproj):

    <ItemGroup>
      <SupportedPlatform Include="browser" />
    </ItemGroup>
    

    For more information on the SupportedPlatform item, see the Browser compatibility analyzer for Blazor WebAssembly section.

Consume a Razor component from an RCL

To consume components from an RCL in another project, use either of the following approaches:

  • Use the full component type name, which includes the RCL's namespace.
  • Individual components can be added by name without the RCL's namespace if Razor's @using directive declares the RCL's namespace. Use the following approaches:
    • Add the @using directive to individual components.
    • include the @using directive in the top-level _Imports.razor file to make the library's components available to an entire project. Add the directive to an _Imports.razor file at any level to apply the namespace to a single component or set of components within a folder. When an _Imports.razor file is used, individual components don't require an @using directive for the RCL's namespace.

In the following examples, ComponentLibrary is an RCL containing the Component1 component. The Component1 component is an example component automatically added to an RCL created from the RCL project template that isn't created to support pages and views.

Note

If the RCL is created to support pages and views, manually add the Component1 component and its static assets to the RCL if you plan to follow the examples in this article. The component and static assets are shown in this section.

Component1.razor in the ComponentLibrary RCL:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

In the app that consumes the RCL, reference the Component1 component using its namespace, as the following example shows.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Alternatively, add a @using directive and use the component without its namespace. The following @using directive can also appear in any _Imports.razor file in or above the current folder.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

For library components that use CSS isolation, the component styles are automatically made available to the consuming app. There's no need to manually link or import the library's individual component stylesheets or its bundled CSS file in the app that consumes the library. The app uses CSS imports to reference the RCL's bundled styles. The bundled styles aren't published as a static web asset of the app that consumes the library. For a class library named ClassLib and a Blazor app with a BlazorSample.styles.css stylesheet, the RCL's stylesheet is imported at the top of the app's stylesheet automatically at build time:

@import '_content/ClassLib/ClassLib.bundle.scp.css';

For the preceding examples, Component1's stylesheet (Component1.razor.css) is bundled automatically.

Component1.razor.css in the ComponentLibrary RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

The background image is also included from the RCL project template and resides in the wwwroot folder of the RCL.

wwwroot/background.png in the ComponentLibrary RCL:

Diagonally-striped background image from the RCL project template

To provide additional library component styles from stylesheets in the library's wwwroot folder, link the stylesheets using the framework's Link component.

The following background image is used in the next example. If you implement the example shown in this section, right-click the image to save it locally.

wwwroot/extra-background.png in the ComponentLibrary RCL:

Diagonally-striped background image added to the library by the developer

Add a new stylesheet to the RCL with an extra-style class.

wwwroot/additionalStyles.css in the ComponentLibrary RCL:

.extra-style {
    border: 2px dashed blue;
    padding: 1em;
    margin: 1em 0;
    background-image: url('extra-background.png');
}

Add a component to the RCL that uses the extra-style class.

ExtraStyles.razor in the ComponentLibrary RCL:

<Link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />

<div class="extra-style">
    <p>
        This component is defined in the <strong>ComponentLibrary</strong> package.
    </p>
</div>

Add a page to the app that uses the ExtraStyles component from the RCL.

Pages/ConsumeComponent3.razor:

@page "/consume-component-3"
@using ComponentLibrary

<h1>Consume component (<code>additionalStyles.css</code> example)</h1>

<ExtraStyles />

When the Link component is used in a child component, the linked asset is also available to any other child component of the parent component if the child with the Link component is rendered.

An alternative to using the Link component is to link to the library's stylesheet in the app's <head> markup.

wwwroot/index.html file (Blazor WebAssembly) or Pages/_Layout.cshtml file (Blazor Server):

+ <link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />

The distinction between using the Link component in a child component and placing a <link> HTML tag in wwwroot/index.html or Pages/_Host.cshtml is that a framework component's rendered HTML tag:

  • Can be modified by application state. A hard-coded <link> HTML tag can't be modified by application state.
  • Is removed from the HTML <head> when the parent component is no longer rendered.

Create an RCL with static assets in the wwwroot folder

An RCL's static assets are available to any app that consumes the library.

Place static assets in the wwwroot folder of the RCL and reference the static assets with the following path in the app: _content/{PACKAGE ID}/{PATH AND FILE NAME}. The {PACKAGE ID} placeholder is the library's package ID. The package ID defaults to the project's assembly name if <PackageId> isn't specified in the project file. The {PATH AND FILE NAME} placeholder is path and file name under wwwroot.

The following example demonstrates the use of RCL static assets with an RCL named ComponentLibrary and a Blazor app that consumes the RCL. The app has a project reference for the ComponentLibrary RCL.

The following Jeep® image is used in this section's example. If you implement the example shown in this section, right-click the image to save it locally.

wwwroot/jeep-yj.png in the ComponentLibrary RCL:

Jeep YJ®

Add the following JeepYJ component to the RCL.

JeepYJ.razor in the ComponentLibrary RCL:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Add the following Jeep component to the app that consumes the ComponentLibrary RCL. The Jeep component uses:

  • The Jeep YJ® image from the ComponentLibrary RCL's wwwroot folder.
  • The JeepYJ component from the RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Rendered Jeep component:

Jeep component

For more information, see Reusable Razor UI in class libraries with ASP.NET Core.

Create an RCL with JavaScript files collocated with components

Collocation of JavaScript (JS) files for pages, views, and Razor components is a convenient way to organize scripts in an app.

Collocate JS files using the following filename extension conventions:

  • Pages of Razor Pages apps and views of MVC apps: .cshtml.js. Examples:
    • Pages/Contact.cshtml.js for the Contact page of a Razor Pages app at Pages/Contact.cshtml.
    • Views/Home/Contact.cshtml.js for the Contact view of an MVC app at Views/Home/Contact.cshtml.
  • Razor components of Blazor apps: .razor.js. Example: Pages/Index.razor.js for the Index component at Pages/Index.razor.

Collocated JS files are publicly addressable using the path to the file in the project:

  • Pages, views, and components from a collocated scripts file in the app:

    {PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

    • The {PATH} placeholder is the path to the page, view, or component.
    • The {PAGE, VIEW, OR COMPONENT} placeholder is the page, view, or component.
    • The {EXTENSION} placeholder matches the extension of the page, view, or component, either razor or cshtml, followed by .js.

    In the following example from a Razor Pages app, the script is collocated in the Pages folder with the Contact page (Pages/Contact.cshtml):

    @section Scripts {
      <script src="~/Pages/Contact.cshtml.js"></script>
    }
    
  • For scripts provided by a Razor class library (RCL):

    _content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

    • The {PACKAGE ID} placeholder is the RCL's package identifier (or library name for a class library referenced by the app).
    • The {PATH} placeholder is the path to the page, view, or component. If a Razor component is located at the root of the RCL, the path segment isn't included.
    • The {PAGE, VIEW, OR COMPONENT} placeholder is the page, view, or component.
    • The {EXTENSION} placeholder matches the extension of page, view, or component, either razor or cshtml, followed by .js.

    In the following Blazor app example:

    • The RCL's package identifier is AppJS.
    • A module's scripts are loaded for the Index component (Index.razor).
    • The Index component is in the Pages folder of the RCL.
    var module = await JS.InvokeAsync<IJSObjectReference>("import", 
        "_content/AppJS/Pages/Index.razor.js");
    

Supply components and static assets to multiple hosted Blazor apps

For more information, see Host and deploy ASP.NET Core Blazor WebAssembly.

Browser compatibility analyzer for Blazor WebAssembly

Blazor WebAssembly apps target the full .NET API surface area, but not all .NET APIs are supported on WebAssembly due to browser sandbox constraints. Unsupported APIs throw PlatformNotSupportedException when running on WebAssembly. A platform compatibility analyzer warns the developer when the app uses APIs that aren't supported by the app's target platforms. For Blazor WebAssembly apps, this means checking that APIs are supported in browsers. Annotating .NET framework APIs for the compatibility analyzer is an on-going process, so not all .NET framework API is currently annotated.

Blazor WebAssembly and RCL projects automatically enable browser compatibility checks by adding browser as a supported platform with the SupportedPlatform MSBuild item. Library developers can manually add the SupportedPlatform item to a library's project file to enable the feature:

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

When authoring a library, indicate that a particular API isn't supported in browsers by specifying browser to UnsupportedOSPlatformAttribute:

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

For more information, see Annotating APIs as unsupported on specific platforms (dotnet/designs GitHub repository.

JavaScript isolation in JavaScript modules

Blazor enables JavaScript isolation in standard JavaScript modules. JavaScript isolation provides the following benefits:

  • Imported JavaScript no longer pollutes the global namespace.
  • Consumers of the library and components aren't required to manually import the related JavaScript.

For more information, see Call JavaScript functions from .NET methods in ASP.NET Core Blazor.

Build, pack, and ship to NuGet

Because Razor class libraries that contain Razor components are standard .NET libraries, packing and shipping them to NuGet is no different from packing and shipping any library to NuGet. Packing is performed using the dotnet pack command in a command shell:

dotnet pack

Upload the package to NuGet using the dotnet nuget push command in a command shell.

Trademarks

Jeep and Jeep YJ are registered trademarks of FCA US LLC (Stellantis NV).

Additional resources

Components can be shared in a Razor class library (RCL) across projects. Include components and static assets in an app from:

  • Another project in the solution.
  • A referenced .NET library.
  • A NuGet package.

Just as components are regular .NET types, components provided by an RCL are normal .NET assemblies.

Create an RCL

  1. Create a new project.
  2. In the Create a new project dialog, select Razor Class Library from the list of ASP.NET Core project templates. Select Next.
  3. In the Configure your new project dialog, provide a project name in the Project name field or accept the default project name. Examples in this topic use the project name ComponentLibrary. Select Create.
  4. In the Create a new Razor class library dialog, select Create.
  5. Add the RCL to a solution:
    1. Open the solution.
    2. Right-click the solution in Solution Explorer. Select Add > Existing Project.
    3. Navigate to the RCL's project file.
    4. Select the RCL's project file (.csproj).
  6. Add a reference to the RCL from the app:
    1. Right-click the app project. Select Add > Project Reference.
    2. Select the RCL project. Select OK.

If the Support pages and views checkbox is selected to support pages and views when generating the RCL from the template:

  • Add an _Imports.razor file to root of the generated RCL project with the following contents to enable Razor component authoring:

    @using Microsoft.AspNetCore.Components.Web
    
  • Add the following SupportedPlatform item to the project file (.csproj):

    <ItemGroup>
      <SupportedPlatform Include="browser" />
    </ItemGroup>
    

    For more information on the SupportedPlatform item, see the Browser compatibility analyzer for Blazor WebAssembly section.

Consume a Razor component from an RCL

To consume components from an RCL in another project, use either of the following approaches:

  • Use the full component type name, which includes the RCL's namespace.
  • Individual components can be added by name without the RCL's namespace if Razor's @using directive declares the RCL's namespace. Use the following approaches:
    • Add the @using directive to individual components.
    • include the @using directive in the top-level _Imports.razor file to make the library's components available to an entire project. Add the directive to an _Imports.razor file at any level to apply the namespace to a single component or set of components within a folder. When an _Imports.razor file is used, individual components don't require an @using directive for the RCL's namespace.

In the following examples, ComponentLibrary is an RCL containing the Component1 component. The Component1 component is an example component automatically added to an RCL created from the RCL project template that isn't created to support pages and views.

Note

If the RCL is created to support pages and views, manually add the Component1 component and its static assets to the RCL if you plan to follow the examples in this article. The component and static assets are shown in this section.

Component1.razor in the ComponentLibrary RCL:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

In the app that consumes the RCL, reference the Component1 component using its namespace, as the following example shows.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Alternatively, add a @using directive and use the component without its namespace. The following @using directive can also appear in any _Imports.razor file in or above the current folder.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

For library components that use CSS isolation, the component styles are automatically made available to the consuming app. There's no need to manually link or import the library's individual component stylesheets or its bundled CSS file in the app that consumes the library. The app uses CSS imports to reference the RCL's bundled styles. The bundled styles aren't published as a static web asset of the app that consumes the library. For a class library named ClassLib and a Blazor app with a BlazorSample.styles.css stylesheet, the RCL's stylesheet is imported at the top of the app's stylesheet automatically at build time:

@import '_content/ClassLib/ClassLib.bundle.scp.css';

For the preceding examples, Component1's stylesheet (Component1.razor.css) is bundled automatically.

Component1.razor.css in the ComponentLibrary RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

The background image is also included from the RCL project template and resides in the wwwroot folder of the RCL.

wwwroot/background.png in the ComponentLibrary RCL:

Diagonally-striped background image from the RCL project template

Create an RCL with static assets

An RCL's static assets are available to any app that consumes the library.

Place static assets in the wwwroot folder of the RCL and reference the static assets with the following path in the app: _content/{PACKAGE ID}/{PATH AND FILE NAME}. The {PACKAGE ID} placeholder is the library's package ID. The package ID defaults to the project's assembly name if <PackageId> isn't specified in the project file. The {PATH AND FILE NAME} placeholder is path and file name under wwwroot.

The following example demonstrates the use of RCL static assets with an RCL named ComponentLibrary and a Blazor app that consumes the RCL. The app has a project reference for the ComponentLibrary RCL.

The following Jeep® image is used in this section's example. If you implement the example shown in this section, right-click the image to save it locally.

wwwroot/jeep-yj.png in the ComponentLibrary RCL:

Jeep YJ®

Add the following JeepYJ component to the RCL.

JeepYJ.razor in the ComponentLibrary RCL:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Add the following Jeep component to the app that consumes the ComponentLibrary RCL. The Jeep component uses:

  • The Jeep YJ® image from the ComponentLibrary RCL's wwwroot folder.
  • The JeepYJ component from the RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Rendered Jeep component:

Jeep component

For more information, see Reusable Razor UI in class libraries with ASP.NET Core.

Supply components and static assets to multiple hosted Blazor apps

For more information, see Host and deploy ASP.NET Core Blazor WebAssembly.

Browser compatibility analyzer for Blazor WebAssembly

Blazor WebAssembly apps target the full .NET API surface area, but not all .NET APIs are supported on WebAssembly due to browser sandbox constraints. Unsupported APIs throw PlatformNotSupportedException when running on WebAssembly. A platform compatibility analyzer warns the developer when the app uses APIs that aren't supported by the app's target platforms. For Blazor WebAssembly apps, this means checking that APIs are supported in browsers. Annotating .NET framework APIs for the compatibility analyzer is an on-going process, so not all .NET framework API is currently annotated.

Blazor WebAssembly and RCL projects automatically enable browser compatibility checks by adding browser as a supported platform with the SupportedPlatform MSBuild item. Library developers can manually add the SupportedPlatform item to a library's project file to enable the feature:

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

When authoring a library, indicate that a particular API isn't supported in browsers by specifying browser to UnsupportedOSPlatformAttribute:

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

For more information, see Annotating APIs as unsupported on specific platforms (dotnet/designs GitHub repository.

JavaScript isolation in JavaScript modules

Blazor enables JavaScript isolation in standard JavaScript modules. JavaScript isolation provides the following benefits:

  • Imported JavaScript no longer pollutes the global namespace.
  • Consumers of the library and components aren't required to manually import the related JavaScript.

For more information, see Call JavaScript functions from .NET methods in ASP.NET Core Blazor.

Build, pack, and ship to NuGet

Because Razor class libraries that contain Razor components are standard .NET libraries, packing and shipping them to NuGet is no different from packing and shipping any library to NuGet. Packing is performed using the dotnet pack command in a command shell:

dotnet pack

Upload the package to NuGet using the dotnet nuget push command in a command shell.

Trademarks

Jeep and Jeep YJ are registered trademarks of FCA US LLC (Stellantis NV).

Additional resources

Components can be shared in a Razor class library (RCL) across projects. Include components and static assets in an app from:

  • Another project in the solution.
  • A referenced .NET library.
  • A NuGet package.

Just as components are regular .NET types, components provided by an RCL are normal .NET assemblies.

Create an RCL

  1. Create a new project.
  2. In the Create a new project dialog, select Razor Class Library from the list of ASP.NET Core project templates. Select Next.
  3. In the Configure your new project dialog, provide a project name in the Project name field or accept the default project name. Examples in this topic use the project name ComponentLibrary. Select Create.
  4. In the Create a new Razor class library dialog, select Create.
  5. Add the RCL to a solution:
    1. Open the solution.
    2. Right-click the solution in Solution Explorer. Select Add > Existing Project.
    3. Navigate to the RCL's project file.
    4. Select the RCL's project file (.csproj).
  6. Add a reference to the RCL from the app:
    1. Right-click the app project. Select Add > Project Reference.
    2. Select the RCL project. Select OK.

If the Support pages and views checkbox is selected to support pages and views when generating the RCL from the template, add an _Imports.razor file to root of the generated RCL project with the following contents to enable Razor component authoring:

@using Microsoft.AspNetCore.Components.Web

Consume a Razor component from an RCL

To consume components from an RCL in another project, use either of the following approaches:

  • Use the full component type name, which includes the RCL's namespace.
  • Individual components can be added by name without the RCL's namespace if Razor's @using directive declares the RCL's namespace. Use the following approaches:
    • Add the @using directive to individual components.
    • include the @using directive in the top-level _Imports.razor file to make the library's components available to an entire project. Add the directive to an _Imports.razor file at any level to apply the namespace to a single component or set of components within a folder. When an _Imports.razor file is used, individual components don't require an @using directive for the RCL's namespace.

In the following examples, ComponentLibrary is an RCL containing the Component1 component. The Component1 component is an example component automatically added to an RCL created from the RCL project template that isn't created to support pages and views.

Note

If the RCL is created to support pages and views, manually add the Component1 component and its static assets to the RCL if you plan to follow the examples in this article. The component and static assets are shown in this section.

Component1.razor in the ComponentLibrary RCL:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

In the app that consumes the RCL, reference the Component1 component using its namespace, as the following example shows.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Alternatively, add a @using directive and use the component without its namespace. The following @using directive can also appear in any _Imports.razor file in or above the current folder.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

The following background image and stylesheet are used by the RCL's Component1 example component. There's no need to add these static assets to a new RCL created from the RCL project template, as they're added automatically by the project template.

wwwroot/background.png in the ComponentLibrary RCL:

Diagonally-striped background image added to the library by the RCL project template

wwwroot/styles.css in the ComponentLibrary RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

To provide Component1's my-component CSS class, link to the library's stylesheet in the app's <head> markup.

wwwroot/index.html file (Blazor WebAssembly) or Pages/_Host.cshtml file (Blazor Server):

+ <link href="_content/ComponentLibrary/styles.css" rel="stylesheet" />

Create an RCL with static assets

An RCL's static assets are available to any app that consumes the library.

Place static assets in the wwwroot folder of the RCL and reference the static assets with the following path in the app: _content/{PACKAGE ID}/{PATH AND FILE NAME}. The {PACKAGE ID} placeholder is the library's package ID. The package ID defaults to the project's assembly name if <PackageId> isn't specified in the project file. The {PATH AND FILE NAME} placeholder is path and file name under wwwroot.

The following example demonstrates the use of RCL static assets with an RCL named ComponentLibrary and a Blazor app that consumes the RCL. The app has a project reference for the ComponentLibrary RCL.

The following Jeep® image is used in this section's example. If you implement the example shown in this section, right-click the image to save it locally.

wwwroot/jeep-yj.png in the ComponentLibrary RCL:

Jeep YJ®

Add the following JeepYJ component to the RCL.

JeepYJ.razor in the ComponentLibrary RCL:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Add the following Jeep component to the app that consumes the ComponentLibrary RCL. The Jeep component uses:

  • The Jeep YJ® image from the ComponentLibrary RCL's wwwroot folder.
  • The JeepYJ component from the RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Rendered Jeep component:

Jeep component

For more information, see Reusable Razor UI in class libraries with ASP.NET Core.

Supply components and static assets to multiple hosted Blazor apps

For more information, see Host and deploy ASP.NET Core Blazor WebAssembly.

Build, pack, and ship to NuGet

Because Razor class libraries that contain Razor components are standard .NET libraries, packing and shipping them to NuGet is no different from packing and shipping any library to NuGet. Packing is performed using the dotnet pack command in a command shell:

dotnet pack

Upload the package to NuGet using the dotnet nuget push command in a command shell.

Trademarks

Jeep and Jeep YJ are registered trademarks of FCA US LLC (Stellantis NV).

Additional resources