Skip to content

techgems/PinesUI

Repository files navigation

PinesUI

An ASP.NET Core component library built on Pines UI, using AlpineJS, TailwindCSS, and Static Components.

You can find the live demo and documentation at pines-ui.techgems.net.

Installation

dotnet add package TechGems.PinesUI --version 1.1.2

Setup

1. Add Tag Helpers

In your _ViewImports.cshtml:

@addTagHelper *, TechGems.PinesUI
@addTagHelper *, TechGems.StaticComponents

2. Include Styles and Scripts

In your layout file (_Layout.cshtml):

<head>
    <!-- PinesUI stylesheet (TailwindCSS-based) -->
    <pines-css />
</head>
<body>
    <!-- Your content -->

    <!-- AlpineJS, GSAP, and Alpine Focus plugin -->
    <pines-scripts />
    <!-- Component-level scripts -->
    <render-static-scripts />
</body>

Included Components

  • Alert - Contextual feedback messages
  • Badge - Status indicators and labels
  • Banner - Full-width notification bars
  • Breadcrumbs - Navigation hierarchy indicators
  • Button - Action buttons in multiple styles
  • Card - Content containers with images
  • Date Picker - Calendar-based date selection
  • Dropdown Menu - Toggleable action menus
  • Icon - SVG icon set
  • Image Gallery - Interactive image viewer with lightbox
  • Input - Text input fields
  • Marquee - Auto-scrolling content
  • Modal - Dialog overlays
  • Quote - Styled blockquotes with attribution
  • Radio Group - Radio button selection groups
  • Rating - Star/heart rating inputs
  • Select - Searchable dropdown selection
  • Switch - Toggle switches
  • Table - Data tables
  • Tabs - Tabbed content panels
  • Text Animation - GSAP-powered text animations
  • Typing Effect - Typewriter text animations

Tech Stack

License

MIT

About

An implementation of Pines UI using ASP.NET Core and Static Components

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors