Noundry UI Showcase

A modern C# ASP.NET TagHelper library with 70 components for building beautiful, interactive web applications.

70 TagHelpers Alpine.js Powered Tailwind CSS .NET 8/9/10

Quick Install

Component Categories

Layout & Navigation

Organize content and navigation with accordions, tabs, dropdowns, breadcrumbs, and more.

Accordion Tabs Dropdown +4 more

Feedback & Status

Communicate with users through alerts, badges, toasts, progress bars, and ratings.

Alert Badge Toast +4 more

Form Controls

Build forms with inputs, selects, date pickers, multi-select, and more with full model binding.

Button Input Select +9 more

Overlays & Modals

Display content above the page with modals, slide-overs, tooltips, and popovers.

Modal Slide Over Tooltip +2 more

Data Display

Display content with cards, tables, pagination, skeletons, and image galleries.

Card Table Skeleton +3 more

Data Grid

Advanced data grid with server-side pagination, sorting, filtering, and selection.

Server-side Sorting Export

All 41 Components (70 TagHelpers)

Layout & Navigation (7)

  • Accordion
  • Tabs
  • Dropdown Menu
  • Breadcrumbs
  • Context Menu
  • Command Palette
  • Navigation Menu

Feedback & Status (7)

  • Alert
  • Badge
  • Toast
  • Toast Container
  • Banner
  • Progress
  • Rating

Form Controls (12)

  • Button
  • Text Input
  • Textarea
  • Switch
  • Checkbox
  • Radio Group
  • Date Picker
  • Date Range Picker
  • Select
  • Combobox
  • Multi-Select
  • Range Slider

Overlays & Data (10)

  • Modal
  • Slide Over
  • Tooltip
  • Popover
  • Hover Card
  • Card
  • Table
  • Pagination
  • Skeleton
  • Image Gallery

Quick Examples

Buttons

View Code 
<noundry-button variant="primary">Primary</noundry-button>
<noundry-button variant="success" icon="check">Save</noundry-button>

Alerts

Success!

Your changes have been saved.
View Code 
<noundry-alert type="success" title="Success!" dismissible="true">
    Your changes have been saved.
</noundry-alert>

Modal

View Code 
<noundry-modal title="Confirm" button-text="Open Modal">
    <p>Are you sure?</p>
</noundry-modal>

Form Controls

View Code 
<noundry-text-input asp-for="Email" icon="email" />
<noundry-switch label="Subscribe" />

Getting Started

1

Install Package

Run dotnet add package Noundry.UI

2

Add TagHelper

Add @addTagHelper *, Noundry.UI to _ViewImports.cshtml

3

Include Scripts

Add Tailwind CSS and Alpine.js to your layout