Writing your own UI libraries

Razor Class Libraries

Static Components has been optimized for the usage of Razor Class Libraries. In fact, as a proof of concept, and for personal use, I wrote an implementation of DevDojo’s PinesUI by making it native to ASP.NET Core and utilizing all the quality of life features that Static Components allows you.

PinesUI Documentation See PinesUI in action — a full UI library built with Static Components.

PinesUI Source Code Use it as a reference for building your own UI libraries with Static Components.

Razor Class Libraries are useful for creating UI component libraries meant to be reused, this can be a great way to isolate your UI-only components from your application’s presentation components.

Razor Class Libraries can be combined with your CSS library of choice to make UI elements easier to use.

Best Practices

This is just a summary of habits you will find useful when writing components that need to be maintained.

Recommendations

• Use Static Scripts extensively. They make it easier to keep related code in the same place, while separating it properly for HTML optimization.
• When using AlpineJS, try to use Alpine.data and Alpine.store over defining in-line state with x-data. This will make your code easier to understand and maintain.
• Do not override the Static Component pipeline unless you really need to do so. It genuinely fits 99% of the scenarios in which implementing a component makes sense.

ASP.NET Core Tag Helper Support

When using Razor Pages or MVC it is important to use ASP.NET Core official tag helpers for link generation, or making forms easier to work with, here are some tips that can make it easier to create your own custom link and form input components:

Tag Helper	How to integrate	Example
asp-for	Use the ModelExpression type as a property in your component.	PinesInput example
asp-controller, asp-action, asp-page	Can be configured on custom Static Components for link generation.	PinesSidebarLink code-behind and view

In general, maintaining ASP.NET Core conventions of usage will make your components better and more consistent for your users.