Noundry.UI Component Library

A comprehensive collection of interactive UI components built with Alpine.js and styled with Tailwind CSS.

62+ Components

Complete set of UI components across all categories

Fully Interactive

Alpine.js powered functionality with working demos

ASP.NET TagHelpers

Server-side integration with model binding

Copy & Paste

Ready-to-use Razor and HTML examples

Tailwind Styled

Beautiful design with dark mode support

Accessibility First

ARIA compliant and keyboard navigable

Buttons

Flexible button components with multiple variants, sizes, and states.

Examples

Code

<noundry-button variant="primary">Primary</noundry-button>
<noundry-button variant="secondary">Secondary</noundry-button>
<noundry-button variant="success">Success</noundry-button>
<noundry-button variant="danger">Danger</noundry-button>

Input Fields

Form input components with validation states and accessibility features.

Examples

Full Name

Email

Message

Code

<noundry-input type="text" label="Full Name" placeholder="Enter your name" />
<noundry-input type="email" label="Email" placeholder="john@example.com" />
<noundry-textarea label="Message" rows="3" placeholder="Your message..." />

Select & Multi-select

Dropdown selection components with single and multiple selection capabilities.

Multi-select Example

Skills

Select skills...

Code

<noundry-multiselect
    label="Skills"
    options="skillsOptions"
    value="selectedSkills"
    placeholder="Select skills..."
/>

Checkboxes & Radio Buttons

Selection components for single and multiple choice scenarios.

Examples

Checkboxes

Option 1 Option 2

Radio Buttons

Credit Card PayPal

Code

<noundry-checkbox value="option1">Option 1</noundry-checkbox>
<noundry-radio-group name="payment">
    <noundry-radio value="credit">Credit Card</noundry-radio>
    <noundry-radio value="paypal">PayPal</noundry-radio>
</noundry-radio-group>

Toggles & Switches

Toggle switches for binary settings and feature flags.

Examples

Enable Feature

Notifications

Code

<noundry-toggle label="Enable Feature" value="enabled" />
<noundry-toggle label="Notifications" value="notifications" />

Cards

Flexible card components for organizing content.

Simple Card

Basic card with content.

With Header

Card with header section.

With Footer

Card with footer actions.

Code

<noundry-card>
    <noundry-card-header>Header</noundry-card-header>
    <noundry-card-body>Content goes here</noundry-card-body>
    <noundry-card-footer>Footer actions</noundry-card-footer>
</noundry-card>

Modals

Overlay components for displaying focused content.

Interactive Demo

Code

<noundry-modal id="example">
    <noundry-modal-header>Title</noundry-modal-header>
    <noundry-modal-body>Content</noundry-modal-body>
</noundry-modal>

Example Modal

This is an example modal with working functionality.

Alerts

Alert components for displaying important messages.

Success!

Your changes have been saved successfully.

Error!

There was an error processing your request.

Code

<noundry-alert type="success" title="Success!">
    Your changes have been saved successfully.
</noundry-alert>

<noundry-alert type="error" title="Error!">
    There was an error processing your request.
</noundry-alert>

Data Tables

Interactive data tables with sorting, filtering, and selection.

Basic Table

Example

Name	Role	Status

Code

<noundry-table data="users">
    <noundry-table-column field="name" label="Name" />
    <noundry-table-column field="role" label="Role" />
    <noundry-table-column field="status" label="Status" type="badge" />
</noundry-table>

Selectable Table with Actions

Users

selected

	Name	Email	Status

Code

<noundry-table data="users" selectable="true">
    <noundry-table-column type="selection" />
    <noundry-table-column field="name" label="Name" />
    <noundry-table-column field="email" label="Email" />
    <noundry-table-column field="status" label="Status" type="badge" />
</noundry-table>

Advanced DataTable with Expanding Rows

Employee Directory

	Name	Department	Role	Status	Last Login

Contact Information $ Current Projects Skills

Showing 1 to of results

Server-Side API Integration

<noundry-data-table
    api-url="/api/employees"
    page-size="25"
    sortable="true"
    searchable="true"
    expandable="true"
>
    <noundry-table-column field="name" label="Name" sortable="true" />
    <noundry-table-column field="department" label="Department" />
    <noundry-table-column field="status" label="Status" type="badge" />
    
    <noundry-expand-template>
        <div class="grid grid-cols-3 gap-4 p-4">
            <div>
                <h4>Contact Info</h4>
                <p>@item.Phone</p>
                <p>@item.Address</p>
            </div>
            <div>
                <h4>Projects</h4>
                <noundry-tag-list items="@item.Projects" />
            </div>
            <div>
                <h4>Skills</h4>
                <noundry-tag-list items="@item.Skills" variant="success" />
            </div>
        </div>
    </noundry-expand-template>
</noundry-data-table>

Razor Collection Model Binding

@model List<Employee>

<noundry-data-table
    data="Model"
    selectable="true"
    on-selection-changed="handleSelectionChange"
    css-class="employee-table"
>
    <noundry-table-column 
        field="Name" 
        label="Employee Name"
        template-url="~/Views/Shared/_NameCell.cshtml" />
    
    <noundry-table-column 
        field="Department.Name" 
        label="Department" />
    
    <noundry-table-column 
        field="Status" 
        label="Status"
        type="badge"
        badge-config="@GetStatusBadgeConfig()" />
    
    <noundry-table-column 
        field="Salary" 
        label="Salary"
        format="currency"
        culture="en-US" />

    <noundry-table-actions>
        <noundry-action-button 
            text="Edit" 
            action-url="@Url.Action("Edit", new { id = "@item.Id" })"
            css-class="btn-primary" />
        <noundry-action-button 
            text="Delete" 
            confirmation-message="Are you sure?"
            action-url="@Url.Action("Delete", new { id = "@item.Id" })"
            method="DELETE"
            css-class="btn-danger" />
    </noundry-table-actions>
</noundry-data-table>

C# API Controller Example

[ApiController]
[Route("api/[controller]")]
public class EmployeesController : ControllerBase
{
    [HttpGet]
    public async Task<ActionResult<DataTableResponse<Employee>>> GetEmployees(
        [FromQuery] DataTableRequest request)
    {
        var query = _context.Employees.AsQueryable();

        // Apply search filter
        if (!string.IsNullOrEmpty(request.Search))
        {
            query = query.Where(e => 
                e.Name.Contains(request.Search) || 
                e.Email.Contains(request.Search) ||
                e.Department.Name.Contains(request.Search));
        }

        // Apply sorting
        if (!string.IsNullOrEmpty(request.SortField))
        {
            query = request.SortDirection == "asc" 
                ? query.OrderBy(request.SortField)
                : query.OrderByDescending(request.SortField);
        }

        var totalRecords = await query.CountAsync();
        
        // Apply pagination
        var employees = await query
            .Skip((request.Page - 1) * request.PageSize)
            .Take(request.PageSize)
            .Include(e => e.Department)
            .Include(e => e.Projects)
            .Include(e => e.Skills)
            .ToListAsync();

        return Ok(new DataTableResponse<Employee>
        {
            Data = employees,
            TotalRecords = totalRecords,
            FilteredRecords = totalRecords,
            Page = request.Page,
            PageSize = request.PageSize
        });
    }
}

Lists

List components for displaying collections of items.

Task List Example

Complete documentation high

Review pull requests medium

Update dependencies low

Code

<noundry-list data="tasks">
    <noundry-list-item checkable="true">
        <span x-text="item.text"></span>
        <noundry-badge :variant="item.priority" />
    </noundry-list-item>
</noundry-list>

Badges & Tags

Badge and tag components for labeling and categorization.

Status Badges

Active Pending Inactive Processing

Code

<noundry-badge variant="success">Active</noundry-badge>
<noundry-badge variant="warning">Pending</noundry-badge>
<noundry-badge variant="danger">Inactive</noundry-badge>
<noundry-badge variant="info">Processing</noundry-badge>

Progress Bars

Progress indicators for showing completion status.

Interactive Example

Upload Progress

Code

<noundry-progress
    value="uploadProgress"
    max="100"
    label="Upload Progress"
    show-percentage="true"
/>

Dropdowns

Dropdown menus for actions and navigation.

Examples

Profile Settings

Sign out

Code

<noundry-dropdown>
    <noundry-dropdown-trigger>
        <button>User Menu</button>
    </noundry-dropdown-trigger>
    <noundry-dropdown-content>
        <noundry-dropdown-item>Profile</noundry-dropdown-item>
        <noundry-dropdown-item>Settings</noundry-dropdown-item>
        <noundry-dropdown-item variant="danger">Sign out</noundry-dropdown-item>
    </noundry-dropdown-content>
</noundry-dropdown>

Tooltips

Contextual information overlays that appear on hover.

This tooltip appears on top

Left tooltip

Right tooltip

Bottom tooltip

Code

<noundry-tooltip text="This tooltip appears on top" position="top">
    <button>Hover me</button>
</noundry-tooltip>

Toast Notifications

Non-intrusive notification messages that appear temporarily.

Try It Out

Code

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

// JavaScript API
toast.success('Success!', 'Operation completed successfully.');
toast.error('Error!', 'Something went wrong.');
toast.warning('Warning!', 'Please check your input.');

Tabs

Tabbed interfaces for organizing content into manageable sections.

Interactive Example

Overview

This is the overview tab content with general information about the component.

Features

Dynamic tab switching
Accessibility support
Keyboard navigation

Settings

Configuration options and preferences go here.

Code

<noundry-tabs active="activeTab">
    <noundry-tab-list>
        <noundry-tab value="overview">Overview</noundry-tab>
        <noundry-tab value="features">Features</noundry-tab>
        <noundry-tab value="settings">Settings</noundry-tab>
    </noundry-tab-list>
    <noundry-tab-panels>
        <noundry-tab-panel value="overview">Overview content</noundry-tab-panel>
        <noundry-tab-panel value="features">Features content</noundry-tab-panel>
        <noundry-tab-panel value="settings">Settings content</noundry-tab-panel>
    </noundry-tab-panels>
</noundry-tabs>

Accordions

Collapsible content sections for FAQ, settings, and organized information.

Interactive Example

Code

<noundry-accordion multiple="false">
    <noundry-accordion-item value="item1">
        <noundry-accordion-trigger>What is Noundry?</noundry-accordion-trigger>
        <noundry-accordion-content>Noundry is a comprehensive .NET development platform...</noundry-accordion-content>
    </noundry-accordion-item>
    <noundry-accordion-item value="item2">
        <noundry-accordion-trigger>How do I get started?</noundry-accordion-trigger>
        <noundry-accordion-content>Install the NuGet packages and follow our guide...</noundry-accordion-content>
    </noundry-accordion-item>
</noundry-accordion>

Breadcrumbs

Navigation breadcrumbs to show the current page's location within the site hierarchy.

Example

Code

<noundry-breadcrumb>
    <noundry-breadcrumb-item href="/">Home</noundry-breadcrumb-item>
    <noundry-breadcrumb-item href="/library">Library</noundry-breadcrumb-item>
    <noundry-breadcrumb-item current="true">UI Components</noundry-breadcrumb-item>
</noundry-breadcrumb>

Pagination

Pagination components for navigating through large datasets.

Interactive Example

Showing page of 5

Code

<noundry-pagination 
    current-page="currentPage" 
    total-pages="5" 
    show-first-last="true"
    show-numbers="true"
/>

Rating System

Interactive star rating components for reviews and feedback.

Interactive Example

Rate this component:

out of 5 stars

Read-only rating:

4.0 (120 reviews)

Code

<noundry-rating 
    value="rating" 
    max="5" 
    interactive="true"
/>

<noundry-rating 
    value="4.0" 
    max="5" 
    readonly="true"
    show-count="true"
    count="120"
/>

Date Pickers

Date selection components with calendar interfaces and range selection.

Interactive Examples

Single Date

Date Range

Click to select start date Click to select end date Range selected:

Single Date:

Date Range:

Code

<noundry-date-picker
    label="Select Date"
    value="selectedDate"
    format="yyyy-MM-dd"
    placeholder="Choose a date"
/>

<noundry-date-range-picker
    label="Select Date Range"
    start-value="startDate"
    end-value="endDate"
    format="yyyy-MM-dd"
    placeholder="Choose date range"
    allow-same-day="false"
/>

<!-- With custom styling -->
<noundry-date-range-picker
    label="Project Timeline"
    start-value="projectStart"
    end-value="projectEnd"
    min-date="DateTime.Today"
    max-date="DateTime.Today.AddMonths(12)"
    highlight-weekends="true"
    disabled-dates="holidays"
/>

Skeleton Loading

Loading placeholders that mimic the shape of content while it loads.

Interactive Example

Loading State:

Code

<noundry-skeleton-loader type="card" />
<noundry-skeleton-loader type="list" rows="3" />
<noundry-skeleton-loader type="table" columns="4" rows="5" />

<!-- Custom skeleton -->
<noundry-skeleton>
    <noundry-skeleton-avatar />
    <noundry-skeleton-text lines="3" />
    <noundry-skeleton-rectangle width="200" height="100" />
</noundry-skeleton>

Slide Over Panels

Side panels that slide in from screen edges for detailed views and forms.

Interactive Example

Click the button above to see the slide over panel in action.

Code

<noundry-slide-over id="userProfile" position="right">
    <noundry-slide-over-header>
        <h2>User Profile</h2>
        <noundry-close-button />
    </noundry-slide-over-header>
    
    <noundry-slide-over-body>
        <!-- Profile form content -->
        <noundry-input label="Name" value="@user.Name" />
        <noundry-input label="Email" value="@user.Email" />
        <noundry-textarea label="Bio" value="@user.Bio" />
    </noundry-slide-over-body>
    
    <noundry-slide-over-footer>
        <noundry-button variant="primary">Save Changes</noundry-button>
        <noundry-button variant="secondary">Cancel</noundry-button>
    </noundry-slide-over-footer>
</noundry-slide-over>

Banners

Page-wide announcement and notification banners.

Examples

Deployment successful!

Your application has been deployed to production.

Maintenance scheduled

System maintenance on Sunday 2-4 AM EST.

New features available!

Check out our latest UI components.

Code

<noundry-banner type="success" dismissible="true">
    <noundry-banner-icon>✅</noundry-banner-icon>
    <noundry-banner-content>
        <strong>Deployment successful!</strong>
        Your application has been deployed to production.
    </noundry-banner-content>
</noundry-banner>

<noundry-banner type="warning" position="top" sticky="true">
    <noundry-banner-content>
        Maintenance scheduled for Sunday 2-4 AM EST
    </noundry-banner-content>
    <noundry-banner-action href="/maintenance">
        Learn More
    </noundry-banner-action>
</noundry-banner>

<!-- With auto-dismiss -->
<noundry-banner type="info" auto-dismiss="5000">
    <noundry-banner-content>
        This message will disappear in 5 seconds
    </noundry-banner-content>
</noundry-banner>

Popovers

Contextual overlays with rich content and flexible positioning.

Interactive Examples

John Doe

Senior Developer

Full-stack developer with 8+ years of experience in React, Node.js, and cloud technologies.

Quick Settings

Notifications Dark Mode

Code

<noundry-popover trigger="click" position="bottom-start">
    <noundry-popover-trigger>
        <button>Open Popover</button>
    </noundry-popover-trigger>
    
    <noundry-popover-content>
        <div class="p-4 w-80">
            <h4>User Profile</h4>
            <p>Detailed user information goes here...</p>
            <div class="mt-3">
                <button>Message</button>
                <button>View Profile</button>
            </div>
        </div>
    </noundry-popover-content>
</noundry-popover>

<!-- With different positions -->
<noundry-popover position="top" offset="8">
    <noundry-popover-trigger>Hover me</noundry-popover-trigger>
    <noundry-popover-content>
        Popover content
    </noundry-popover-content>
</noundry-popover>

Context Menu

Right-click context menus for quick actions and shortcuts.

Interactive Example

Right-click me!

Try right-clicking on this area

Code

<noundry-context-menu target="#fileList">
    <noundry-context-menu-item icon="📁">
        New Folder
    </noundry-context-menu-item>
    <noundry-context-menu-item icon="📄">
        New File
    </noundry-context-menu-item>
    <noundry-context-menu-divider />
    <noundry-context-menu-item icon="📋">
        Paste
    </noundry-context-menu-item>
    <noundry-context-menu-item icon="🗑️" variant="danger">
        Delete
    </noundry-context-menu-item>
</noundry-context-menu>

<!-- Programmatic usage -->
<div context-menu="fileActions">
    Right-click target content
</div>

Command Palette

Search-driven command interface for quick actions and navigation.

Interactive Example

Keyboard Shortcut:

Ctrl + Shift + P

Code

<noundry-command-palette
    shortcut="Ctrl+Shift+P"
    placeholder="Search commands..."
    max-results="10"
>
    <noundry-command-group label="File">
        <noundry-command action="newFile" icon="📄">
            New File
        </noundry-command>
        <noundry-command action="openFile" icon="📁">
            Open File
        </noundry-command>
    </noundry-command-group>
    
    <noundry-command-group label="Navigation">
        <noundry-command action="goToLine" icon="🔢">
            Go to Line
        </noundry-command>
        <noundry-command action="searchFiles" icon="🔍">
            Search Files
        </noundry-command>
    </noundry-command-group>
</noundry-command-palette>

Combobox

Input with dropdown filtering and autocomplete functionality.

Interactive Example

Framework Selection

No results found

Selected:

Code

<noundry-combobox
    label="Framework"
    value="selectedFramework"
    options="frameworkOptions"
    filterable="true"
    placeholder="Search frameworks..."
>
    <noundry-combobox-option value="react">React</noundry-combobox-option>
    <noundry-combobox-option value="vue">Vue.js</noundry-combobox-option>
    <noundry-combobox-option value="angular">Angular</noundry-combobox-option>
</noundry-combobox>

<!-- With server-side filtering -->
<noundry-combobox
    api-url="/api/users/search"
    value="selectedUser"
    display-field="Name"
    value-field="Id"
    min-search-length="2"
    debounce="300"
/>

Copy to Clipboard

One-click copy functionality for text, code, and data.

Interactive Examples

Copy Text

Code Example

example.js

function greet(name) {
  return `Hello, ${name}!`;
}

API Key

sk-1234567890abcdef...

Code

<noundry-copy-to-clipboard text="@Model.ApiKey">
    <noundry-input value="@Model.ApiKey" readonly="true" />
    <noundry-copy-button>Copy</noundry-copy-button>
</noundry-copy-to-clipboard>

<!-- Code block with copy -->
<noundry-code-block language="javascript" copy-button="true">
function greet(name) {
  return `Hello, ${name}!`;
}
</noundry-code-block>

<!-- Inline copy -->
<noundry-copy-text text="sk-1234567890abcdef">
    API Key: sk-1234567890abcdef
</noundry-copy-text>

<!-- With custom success message -->
<noundry-copy-to-clipboard 
    text="@shareUrl" 
    success-message="Link copied!"
    success-duration="3000"
>
    <button>Share Link</button>
</noundry-copy-to-clipboard>

UI Components

Form Components

Layout

Data Display

Interactive

Noundry.UI Component Library

62+ Components

Fully Interactive

ASP.NET TagHelpers

Copy & Paste

Tailwind Styled

Accessibility First

Buttons

Examples

Code

Input Fields

Examples

Code

Select & Multi-select

Multi-select Example

Code

Checkboxes & Radio Buttons

Examples

Checkboxes

Radio Buttons

Code

Toggles & Switches

Examples

Code

Cards

Simple Card

With Header

With Footer

Code

Modals

Interactive Demo

Code

Example Modal

Alerts

Code

Data Tables

Basic Table

Example

Code

Selectable Table with Actions

Users

Code

Advanced DataTable with Expanding Rows

Employee Directory

Contact Information

Current Projects

Skills

Server-Side API Integration

Razor Collection Model Binding

C# API Controller Example

Lists

Task List Example

Code

Badges & Tags

Status Badges

Code

Progress Bars

Interactive Example

Code

Dropdowns

Examples

Code

Tooltips

Code

Toast Notifications

Try It Out

Code

Tabs

Interactive Example

Overview

Features

Settings

Code

Accordions

Interactive Example