Powerful attribute-based TagHelpers for ASP.NET Core that enhance your HTML with conditional rendering, modern web APIs, authorization helpers, and Tailwind CSS integration.
Enhanced ASP.NET Core TagHelpers designed specifically for modern web development with Tailwind CSS.
Pre-configured with Tailwind CSS classes for consistent styling and responsive design out of the box.
Built-in authorization TagHelpers for policy-based and role-based content rendering with asp-authz attributes.
Form groups, alerts, validation messages, and UI enhancements with Tailwind CSS styling built-in.
Install Noundry.TagHelpers and enhance your HTML with powerful attribute-based helpers.
Add to _ViewImports.cshtml
<!-- Conditional rendering and modern features -->
<!-- Show admin panel only for admins -->
<div asp-authz="Admin" class="bg-red-50 p-4 rounded">
<h2>Admin Dashboard</h2>
</div>
<!-- Show content only when user is logged in -->
<section asp-if="User.Identity.IsAuthenticated">
<h1>Welcome, @User.Identity.Name!</h1>
<!-- Native lazy loading -->
<img lazy src="profile-picture.jpg" alt="Profile" />
<!-- Web Share API -->
<button web-share
title="My Profile"
url="@Url.Page("/Profile")">
Share Profile
</button>
</section>
<!-- Show login form when not authenticated -->
<div asp-unless="User.Identity.IsAuthenticated">
<form-group label="Email">
<input type="email" name="email" />
</form-group>
</div>Powerful attribute-based helpers that enhance your existing HTML elements with modern web features.
Show or hide elements based on boolean conditions or expressions.
<!-- Show only when user is authenticated -->
<div asp-if="User.Identity.IsAuthenticated">
Welcome back, @User.Identity.Name!
</div>
<!-- Show login form when not authenticated -->
<form asp-unless="User.Identity.IsAuthenticated">
<input type="email" placeholder="Email" />
<button type="submit">Sign In</button>
</form>
<!-- Show based on model property -->
<div asp-if="Model.HasError"
class="bg-red-100 text-red-800 p-4">
Error: @Model.ErrorMessage
</div>Authorization-based rendering using roles and policies.
<!-- Show only for admin users -->
<div asp-authz="Admin">
<h2>Admin Dashboard</h2>
<button>Delete User</button>
</div>
<!-- Show when user has specific policy -->
<section asp-authz-policy="CanEditPosts">
<a href="/posts/edit">Edit Post</a>
</section>
<!-- Show when user has ANY of these policies -->
<nav asp-authz-policy-any="CanRead,CanWrite">
<a href="/content">Content Management</a>
</nav>Modern web features made simple with declarative attributes.
<img src="placeholder.jpg" lazy="hero-image.jpg" alt="Hero" />
<div lazy="expensive-component.html">Loading...</div><button web-share="{ title: 'Amazing Product', text: 'Check this out!', url: '/products/123' }">
Share Product
</button><div intersection-observe="{ threshold: 0.5, action: 'fadeIn' }">
Animate when visible
</div><button pwa-install="Install App">Install</button>Enhanced form controls and UI components with built-in validation and styling.
<div form-group="email">
<label asp-for="Email"></label>
<input asp-for="Email" />
<span asp-validation-for="Email"></span>
</div><div alert="success" dismissible="true">
Operation completed successfully!
</div>
<div alert="error" asp-if="ViewBag.HasError">
@ViewBag.ErrorMessage
</div><span validation-message="Email" class="text-red-500"></span>
<div validation-summary="true" class="alert alert-danger"></div><input asp-for="Country" datalist="countries" />
<datalist id="countries" data-source="/api/countries"></datalist>Optimize for search engines and enhance data presentation.
<head seo="{ title: 'Product Name', description: 'Amazing product description', keywords: 'product,amazing' }">
</head><div json-ld="{ '@type': 'Product', name: 'Product Name', price: '99.99' }"></div><time time-ago="@Model.CreatedAt">@Model.CreatedAt</time>
<span time-format="@Model.UpdatedAt" format="MMM dd, yyyy"></span><link prefetch="/api/user-data" />
<img preload="critical-image.jpg" alt="Critical content" />Enhanced input field with label, validation, and multiple input types.
<!-- Basic text input -->
<noundry-input
asp-for="Name"
type="text"
label="Full Name"
placeholder="Enter your full name"
required />
<!-- Email input with validation -->
<noundry-input
asp-for="Email"
type="email"
label="Email Address"
placeholder="your@email.com"
help-text="We'll never share your email" />
<!-- Password input -->
<noundry-input
asp-for="Password"
type="password"
label="Password"
show-strength="true" />Dropdown selection and multi-line text input components.
<!-- Select dropdown -->
<noundry-select
asp-for="CategoryId"
asp-items="Model.Categories"
label="Category"
placeholder="Choose a category" />
<!-- Textarea -->
<noundry-textarea
asp-for="Description"
label="Description"
rows="4"
placeholder="Enter description..." />Styled button component with multiple variants, sizes, and states.
<!-- Primary button -->
<noundry-button
variant="primary"
size="md">
Save Changes
</noundry-button>
<!-- Secondary button -->
<noundry-button
variant="secondary">
Cancel
</noundry-button>
<!-- Loading state -->
<noundry-button
variant="primary"
loading="true">
Processing...
</noundry-button>
<!-- Danger button -->
<noundry-button
variant="danger"
onclick="confirm('Are you sure?')">
Delete Item
</noundry-button><!-- Number input with range -->
<noundry-input
asp-for="Age"
type="number"
label="Age"
min="18"
max="120"
help-text="Must be 18 or older" />
<!-- Phone input with pattern -->
<noundry-input
asp-for="Phone"
type="tel"
label="Phone Number"
placeholder="(555) 123-4567"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
<!-- URL input -->
<noundry-input
asp-for="Website"
type="url"
label="Website"
placeholder="https://example.com" />Must be 18 or older
Automatic integration with ASP.NET Core model validation and data annotations.
// Model with validation attributes
public class ContactForm
{
[Required]
[StringLength(100, MinimumLength = 2)]
public string Name { get; set; }
[Required]
[EmailAddress]
public string Email { get; set; }
[Required]
[Range(18, 120)]
public int Age { get; set; }
[StringLength(500)]
public string Message { get; set; }
}<noundry-form asp-action="Create" validate="true">
<noundry-input asp-for="Name" label="Full Name" />
<noundry-input asp-for="Email" type="email" label="Email" />
<noundry-input asp-for="Age" type="number" label="Age" />
<noundry-textarea asp-for="Message" label="Message" />
<noundry-button type="submit" variant="primary">Submit</noundry-button>
</noundry-form>See how Noundry.TagHelpers integrates with other Noundry components and ASP.NET Core features.
Complete product creation form with validation, file upload, and category selection.
<noundry-form asp-action="Create" class="max-w-2xl mx-auto space-y-6">
<!-- Basic product information -->
<div class="grid md:grid-cols-2 gap-4">
<noundry-input
asp-for="Name"
label="Product Name"
placeholder="Enter product name"
required />
<noundry-input
asp-for="Price"
type="number"
label="Price"
min="0"
step="0.01"
placeholder="0.00" />
</div>
<!-- Category selection -->
<noundry-select
asp-for="CategoryId"
asp-items="ViewBag.Categories"
label="Category"
placeholder="Select a category" />
<!-- Description -->
<noundry-textarea
asp-for="Description"
label="Description"
rows="4"
placeholder="Describe your product..." />
<!-- Form actions -->
<div class="flex space-x-4">
<noundry-button type="submit" variant="primary" class="flex-1">
Create Product
</noundry-button>
<noundry-button type="button" variant="secondary">
Cancel
</noundry-button>
</div>
</noundry-form>Integration with Noundry.Authnz for user registration and OAuth alternatives.
<div class="max-w-md mx-auto">
<!-- OAuth Options (Noundry.Authnz) -->
<div class="mb-6">
<noundry-oauth-login show-all="true"></noundry-oauth-login>
</div>
<div class="text-center text-gray-500 mb-6">
<span>Or register with email</span>
</div>
<!-- Traditional registration form -->
<noundry-form asp-action="Register" class="space-y-4">
<noundry-input asp-for="Email" type="email" label="Email" />
<noundry-input asp-for="Password" type="password" label="Password" />
<noundry-input asp-for="ConfirmPassword" type="password" label="Confirm" />
<noundry-checkbox asp-for="AcceptTerms" required>
I accept the <a href="/terms">terms and conditions</a>
</noundry-checkbox>
<noundry-button type="submit" variant="primary" class="w-full">
Create Account
</noundry-button>
</noundry-form>
</div>Powerful features that make Noundry.TagHelpers perfect for complex web applications.
Automatic ARIA attributes for screen readers
Full keyboard accessibility support
Proper focus indicators and tab order
Optimized for mobile devices and small screens
Grid and flexbox layouts with Tailwind CSS
Responsive behavior across all screen sizes
No client-side JavaScript required
Clean, optimized HTML output
Works with Tailwind CSS purging
@* Contact.cshtml - Complete form example *@
@page
@model ContactModel
<div class="max-w-2xl mx-auto py-8">
<h1 class="text-3xl font-bold mb-8">Contact Us</h1>
<noundry-form asp-action="Submit" class="space-y-6" validate="true">
<!-- Personal Information -->
<div class="grid md:grid-cols-2 gap-4">
<noundry-input asp-for="FirstName" label="First Name" required />
<noundry-input asp-for="LastName" label="Last Name" required />
</div>
<noundry-input asp-for="Email" type="email" label="Email Address" required />
<noundry-select asp-for="Subject" label="Subject" required>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="sales">Sales Question</option>
</noundry-select>
<noundry-textarea
asp-for="Message"
label="Message"
rows="5"
placeholder="How can we help you?"
required />
<noundry-button type="submit" variant="primary" class="w-full">
Send Message
</noundry-button>
</noundry-form>
</div>Configure Noundry.TagHelpers in your ASP.NET Core application.
Add to _ViewImports.cshtml
<!-- Conditional rendering -->
<div asp-if="User.Identity.IsAuthenticated">Welcome!</div>
<!-- Web APIs -->
<button web-share="shareData">Share</button>// Program.cs - Service registration
builder.Services.AddNoundryTagHelpers(options =>
{
// Configure default CSS classes
options.AlertClasses = "alert";
options.FormGroupClasses = "form-group mb-3";
// Configure validation styling
options.ValidationClasses = "text-danger";
options.SuccessClasses = "border-green-500 text-green-500";
// Theme configuration
options.Theme = NoundryTheme.Default; // or Custom
});Start using Noundry.TagHelpers today and add powerful attribute-based functionality to your ASP.NET Core applications.