Package icon

Noundry.UI 1.51.0

by Noundry UI Contributors

Noundry UI

A modern C# ASP.NET TagHelper library that provides server-side components with Alpine.js and Tailwind CSS integration for building beautiful, interactive web applications.

✨ Features

  • 🎯 71 UI TagHelpers - Complete set of interactive components
  • 🔗 Full Model Binding - Seamless ASP.NET model binding support
  • ♿ Accessibility Ready - ARIA attributes and keyboard navigation
  • 🎨 Tailwind CSS Integration - Beautiful, consistent styling
  • ⚡ Alpine.js Powered - Lightweight client-side interactivity
  • 📱 Responsive Design - Mobile-first approach
  • 🛡️ Type Safe - Strong typing throughout
  • 🔧 Highly Configurable - Extensive customization options

🚀 Quick Start

Installation

dotnet add package Noundry.UI

Setup

  1. Add the TagHelper to your _ViewImports.cshtml:
@addTagHelper *, Noundry.UI
  1. Register services in your Program.cs:
builder.Services.AddNoundryUI(options =>
{
    options.IncludeAlpineJS = true;
    options.IncludeTailwindCSS = true;
});
  1. Include required scripts in your layout:
<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Alpine.js Plugins -->
    <script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Alpine.js -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <style>
        [x-cloak] { display: none !important; }
    </style>
</head>
<body>
    <!-- Your content -->
</body>
</html>

🎨 Tailwind CSS Safelist (Important!)

Noundry.UI components use dynamic Tailwind CSS classes that may not be detected by Tailwind's content scanner. To ensure all styles are compiled correctly, you must add the safelist file to your Tailwind configuration.

Automatic Setup

When you install the Noundry.UI package, a file is automatically copied to your project root during build.

Add it to your :

\

Disabling Automatic Copy

If you don't want the safelist file copied automatically, add this to your :

\

📖 Basic Usage

Alerts & Notifications

<!-- Success alert -->
<noundry-alert type="success" dismissible="true" title="Success!">
    Your action was completed successfully.
</noundry-alert>

<!-- Toast notifications -->
<noundry-toast type="info" title="Information" trigger-text="Show Info">
    This is an informational message.
</noundry-toast>

Interactive Components

<!-- Modal dialog -->
<noundry-modal title="Confirmation" button-text="Open Modal">
    <p>Are you sure you want to continue?</p>
    <div class="flex gap-2 mt-4">
        <noundry-button type="submit">Confirm</noundry-button>
        <noundry-button variant="secondary">Cancel</noundry-button>
    </div>
</noundry-modal>

<!-- Collapsible accordion -->
<noundry-accordion>
    <noundry-accordion-item title="What is Noundry UI?">
        Noundry UI is a modern C# ASP.NET TagHelper library designed for building beautiful, interactive web applications.
    </noundry-accordion-item>
    <noundry-accordion-item title="How do I use it?">
        Simply add the NuGet package, include Alpine.js and Tailwind CSS, then use the noundry-* tags in your Razor views.
    </noundry-accordion-item>
</noundry-accordion>

Form Controls with Model Binding

<!-- Text inputs with validation -->
<noundry-text-input asp-for="Name" label="Full Name" placeholder="Enter your name" />
<noundry-text-input asp-for="Email" type="email" placeholder="user@example.com" />

<!-- Toggle switch -->
<noundry-switch asp-for="EnableNotifications" label="Enable Notifications" />

<!-- Date picker -->
<noundry-date-picker asp-for="BirthDate" placeholder="Select date" />

<!-- Advanced select with search -->
<noundry-select asp-for="Country" placeholder="Select country" searchable="true">
    <noundry-option value="us">United States</noundry-option>
    <noundry-option value="uk">United Kingdom</noundry-option>
    <noundry-option value="ca">Canada</noundry-option>
</noundry-select>

<!-- Select with SelectListItem binding -->
<noundry-select asp-for="CategoryId" items="Model.Categories" />

<!-- Multi-select with SelectListItem binding -->
<noundry-multi-select asp-for="SelectedTags" items="Model.AvailableTags" />

<!-- Dashboard stat cards -->
<noundry-stat-card label="Total Users" value="12,847" icon="users" variant="indigo"
                   trend="+12%" trend-direction="up" trend-label="from last month" />

📦 Available Components

Layout & Navigation

  • Accordion - Collapsible content sections
  • Tabs - Tab-based content switching
  • Dropdown Menu - Context menus and user menus
  • Breadcrumbs - Navigation paths

Feedback & Status

  • Alert - Notification messages with dismiss functionality
  • Badge - Status indicators and labels
  • Toast - Temporary notification messages
  • Progress - Progress bars and loading indicators

Form Controls

  • Button - Interactive buttons with loading states
  • Text Input - Text fields with validation support
  • Switch - Toggle controls for boolean values
  • Date Picker - Calendar-based date selection
  • Select - Dropdown selection with search capability
  • Textarea - Multi-line text input
  • Checkbox - Checkbox inputs
  • Radio Group - Radio button selections

Overlays & Modals

  • Modal - Dialog windows with backdrop
  • Slide Over - Side panel overlays
  • Tooltip - Hover information display
  • Popover - Click-activated content overlay

Data Display

  • Table - Data tables with sorting
  • Data Table - Advanced data table with API, pagination, sorting
  • Card - Content containers
  • Stat Card - Dashboard tiles with icons, values, and trends
  • Image Gallery - Image viewer with navigation

Advanced Components

  • Command - Command palette interface
  • Copy to Clipboard - Text copy functionality
  • Text Animation - Animated text effects
  • Navigation Menu - Advanced navigation with dropdowns

🎨 Styling & Theming

Noundry UI uses Tailwind CSS for styling. You can customize components by:

  1. Using CSS Classes: Add custom classes via the css-class attribute
<noundry-button css-class="shadow-lg border-2">Custom Button</noundry-button>
  1. Theme Configuration: Configure default styles in your service registration
builder.Services.AddNoundryUI(options =>
{
    options.Defaults.ButtonVariant = "primary";
    options.Defaults.AlertType = "info";
    options.CustomClasses.Add("button", "custom-button-class");
});

🔧 Advanced Features

Form Integration

<form asp-action="Create" method="post">
    <div class="space-y-4">
        <noundry-text-input asp-for="Name" />
        <noundry-switch asp-for="IsActive" />
        
        <div class="flex gap-2">
            <noundry-button type="submit" loading="true" loading-text="Saving...">
                Save
            </noundry-button>
            <noundry-button type="button" variant="secondary">
                Cancel
            </noundry-button>
        </div>
    </div>
</form>

Alpine.js Integration

Components automatically integrate with Alpine.js. You can extend functionality:

<div x-data="{ customData: 'Hello World!' }">
    <noundry-button x-on:click="alert(customData)">Show Alert</noundry-button>
</div>

Configuration Options

builder.Services.AddNoundryUI(options =>
{
    // Auto-include dependencies
    options.IncludeAlpineJS = true;
    options.IncludeTailwindCSS = true;
    
    // Default component settings
    options.Defaults.ButtonSize = "md";
    options.Defaults.ToastPosition = "top-right";
    options.Defaults.ModalMaxWidth = "sm:max-w-lg";
    
    // Custom CSS classes
    options.CustomClasses["alert"] = "my-alert-styles";
});

🌟 Examples

Check out our comprehensive demo application showcasing all components with working examples.

📄 Documentation

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📝 License

This project is licensed under the MIT License.

🙏 Acknowledgments

Built with inspiration from the excellent PinesUI component library, adapted for the ASP.NET ecosystem with modern tooling and best practices.

Made with ❤️ by the Noundry UI team

.NET 8.0

No dependencies.

.NET 9.0

No dependencies.

.NET 10.0

No dependencies.

No packages depend on Noundry.UI.

Version Downloads Last Updated
1.52.0 17 1/8/2026
1.51.0 Current 12 12/30/2025

Info

Statistics

Total Downloads
29
Current Version Downloads
12

Authors

Noundry UI Contributors