Noundry.UI Documentation

Quick Start

1. Register Tag Helpers & Services

// _ViewImports.cshtml
@addTagHelper *, Noundry.UI

// Program.cs
builder.Services.AddNoundryUI();
// Or with options:
builder.Services.AddNoundryUI(options =>
{
 options.IncludeAlpineJS = true;
 options.IncludeTailwindCSS = true;
 options.Defaults.ButtonVariant = "primary";
 options.Defaults.ToastPosition = "top-right";
});

2. Add Dependencies to Layout

<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 Core -->
 <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 <style>[x-cloak] { display: none !important; }</style>
</head>

Form Controls (17 Components)

noundry-button

Interactive button with loading states and variant styling.

<noundry-button type="submit" variant="primary">Save Changes</noundry-button>
<noundry-button loading="true" loading-text="Saving...">Submit</noundry-button>
<noundry-button variant="danger" size="sm">Delete</noundry-button>

noundry-text-input

Text input with label, validation, icons, and help text.

<noundry-text-input asp-for="User.Email" type="email" />
<noundry-text-input asp-for="User.Username" label="Username"
 help-text="Must be 3-20 characters" icon="user" />

noundry-select / noundry-multi-select

Dropdown select with search, server-side collection binding, and multi-selection with tags display.

<noundry-select asp-for="User.Country"
 options-source="Model.Countries"
 options-value-property="Value"
 options-text-property="Text"
 searchable="true" />

Other form controls: noundry-textarea, noundry-switch, noundry-checkbox, noundry-radio-group, noundry-combobox, noundry-date-picker, noundry-date-range-picker, noundry-range-slider, noundry-rating.

Feedback & Status (9 Components)

noundry-alert

Notification messages with dismiss. Types: success, info, warning, error.

noundry-badge

Status indicators and labels with variant styling and rounded option.

noundry-toast / noundry-toast-container

Temporary notifications with JS API: toast.success('Done!')

noundry-progress

Animated progress bar with percentage display, striped, and color options.

noundry-banner

Fixed top notification banner with delay, dismiss, and icon support.

Layout & Navigation (16 Components)

noundry-accordion

Collapsible content sections with multiple-open support.

noundry-tabs

Tab-based content switching with default and pills styles.

noundry-dropdown-menu

Context menus and user menus with avatar support.

noundry-breadcrumbs

Navigation path components with customizable separators.

noundry-command

Ctrl+K command palette with searchable groups and shortcuts.

noundry-context-menu

Right-click context menus with icons and keyboard shortcuts.

Overlays & Modals (9 Components)

noundry-modal

Dialog windows with backdrop, close button, and footer slot.

noundry-slide-over

Side panel overlays with left/right positioning.

noundry-tooltip

Hover/click/focus tooltips with position and theme options.

noundry-popover / noundry-hover-card

Click-activated content overlays and hover-triggered info cards.

Data Display (22 Components)

noundry-data-table

Advanced data table with API endpoint, pagination, sorting, search, expandable rows, and row selection.

<noundry-data-table
 api-url="/api/users"
 columns='[{"field":"name","header":"Name","sortable":true},{"field":"email","header":"Email"}]'
 page-size="10"
 searchable="true"
 striped="true" />

noundry-chart

Pure SVG charts (bar, line, area, pie, donut, radar) with 3 data loading patterns: API, inline JSON, or server-side collection.

<noundry-chart type="bar" api-url="/api/revenue" x-axis="month">
 <noundry-chart-series key="revenue" label="Revenue" color="indigo" />
 <noundry-chart-series key="expenses" label="Expenses" color="red" />
</noundry-chart>

<!-- Pie/Donut (no series needed) -->
<noundry-chart type="donut" title="Sales by Region"
 api-url="/api/regions" label-key="region" value-key="amount" />

Other data components: noundry-card, noundry-table, noundry-pagination, noundry-copy-to-clipboard, noundry-skeleton, noundry-image-gallery.

Common Patterns

Form with Validation

<form asp-action="Create" method="post" class="space-y-4">
 <noundry-text-input asp-for="User.Name" label="Full Name" required="true" />
 <noundry-text-input asp-for="User.Email" type="email" required="true" />
 <noundry-select asp-for="User.Country" options-source="Model.Countries" />
 <noundry-switch asp-for="User.ReceiveNewsletter" label="Subscribe" />
 <noundry-checkbox asp-for="User.AcceptTerms" label="I accept the terms" required="true" />
 <div class="flex gap-2">
 <noundry-button type="submit" variant="primary">Create Account</noundry-button>
 <noundry-button variant="secondary" href="/">Cancel</noundry-button>
 </div>
</form>

Modal Confirmation

<noundry-modal title="Delete Item" button-text="Delete" button-variant="danger">
 <p>Are you sure you want to delete this item?</p>
 <div class="flex justify-end gap-2 mt-4">
 <noundry-button variant="secondary">Cancel</noundry-button>
 <noundry-button type="submit" variant="danger">Delete</noundry-button>
 </div>
</noundry-modal>

Toast Notifications

<!-- In layout -->
<noundry-toast-container position="top-right" />

<!-- JavaScript API -->
<script>
 toast.success('Operation completed!');
 toast.error('Something went wrong');
 toast.info('Information message');
</script>

Tailbreeze Integration

For production, use Tailbreeze instead of the Tailwind CDN. It auto-detects Noundry.UI's class safelist.

builder.Services.AddNoundryUI();
builder.Services.AddTailbreeze(); // Auto-detects Noundry.UI safelist
app.UseTailbreeze();

CDN Approach	Tailbreeze Approach
~300KB CSS loaded	~50KB optimized CSS
Requires internet	Works offline
Dev only	Production ready

Noundry.UI