Installation

Follow the steps below to add PinesUI to your ASP.NET Core project.

1. Install the NuGet Package

Add the package to your project using the .NET CLI:

    dotnet add package TechGems.PinesUI --version 1.0.0

2. Add Tag Helpers

In your _ViewImports.cshtml, register the tag helpers for both PinesUI and Static Components:

    // _ViewImports.cshtml
@addTagHelper *, TechGems.PinesUI
@addTagHelper *, TechGems.StaticComponents

3. Set Up Your Layout

Add the required tags to your _Layout.cshtml:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <pines-css />
</head>
<body>
    @RenderBody()

    <pines-scripts />
    <render-static-scripts />
</body>
</html>

What these components do

<pines-css /> — Renders the TailwindCSS-based library stylesheet.
<pines-scripts /> — Loads AlpineJS (core + focus plugin) and GSAP for animations.
<render-static-scripts /> — Renders any component-level scripts registered by individual components.

4. Start Using Components

You're all set! Start using PinesUI components in any Razor page or view:

    <pines-alert type="Primary" color="Blue" header="Hello PinesUI!">
    Your setup is complete.
</pines-alert>