Overlays & Modals

Overlay components for displaying content above the page: Modal, Slide Over, Tooltip, Popover, and Hover Card.

Modal

Dialog windows with backdrop, focus trap, and keyboard support. Use modals for confirmations, forms, and important content.

View Code 
<!-- Confirmation Modal -->
<noundry-modal title="Confirm Action"
               button-text="Open Modal"
               button-variant="primary"
               max-width="sm:max-w-lg"
               close-on-backdrop="true"
               close-on-escape="true">
    <p>Are you sure you want to continue?</p>
    <div class="flex gap-2 mt-4">
        <noundry-button variant="primary">Confirm</noundry-button>
        <noundry-button variant="secondary">Cancel</noundry-button>
    </div>
</noundry-modal>

<!-- Form Modal -->
<noundry-modal title="Edit Profile"
               button-text="Edit"
               max-width="sm:max-w-xl">
    <form class="space-y-4">
        <noundry-text-input label="Name" placeholder="Enter name" />
        <noundry-text-input label="Email" type="email" />
        <div class="flex gap-2 justify-end">
            <noundry-button variant="secondary">Cancel</noundry-button>
            <noundry-button type="submit" variant="primary">Save</noundry-button>
        </div>
    </form>
</noundry-modal>

Modal Properties

Property Type Default Description
titlestring"Modal Title"Modal header title
button-textstring"Open"Trigger button text
button-variantstring"primary"Button style
max-widthstring"sm:max-w-lg"Modal width
closablebooltrueShow close button
close-on-backdropbooltrueClose on backdrop click
close-on-escapebooltrueClose on Escape key

Slide Over

Side panel overlays that slide in from the left or right. Perfect for settings panels, filters, and secondary content.

View Code 
<noundry-slide-over title="Settings"
                    button-text="Open Settings"
                    position="right"
                    width="w-96">
    <noundry-slide-over-content>
        <div class="space-y-4">
            <noundry-switch label="Enable notifications" />
            <noundry-switch label="Dark mode" />
            <noundry-switch label="Auto-save" />
        </div>
    </noundry-slide-over-content>
</noundry-slide-over>

<!-- Left Position -->
<noundry-slide-over title="Menu"
                    button-text="Open Menu"
                    position="left"
                    width="w-80">
    <noundry-slide-over-content>
        <nav>...</nav>
    </noundry-slide-over-content>
</noundry-slide-over>

Slide Over Properties

Property Type Default Description
titlestringnullPanel title
button-textstring"Open"Trigger button text
positionstring"right"Position: left, right
widthstring"w-80"Panel width
closablebooltrueShow close button

Tooltip

Hover information display. Use tooltips for brief explanations or additional context.

Positions

This tooltip appears on top
This tooltip appears on the right
This tooltip appears on the bottom
This tooltip appears on the left

With Delay

No delay (instant)
500ms delay
1 second delay
View Code 
<!-- Basic Tooltips -->
<noundry-tooltip text="Helpful information" position="top">
    <span>Hover over me</span>
</noundry-tooltip>

<!-- Different Positions -->
<noundry-tooltip text="Top tooltip" position="top">...</noundry-tooltip>
<noundry-tooltip text="Right tooltip" position="right">...</noundry-tooltip>
<noundry-tooltip text="Bottom tooltip" position="bottom">...</noundry-tooltip>
<noundry-tooltip text="Left tooltip" position="left">...</noundry-tooltip>

<!-- With Delay -->
<noundry-tooltip text="Delayed tooltip" position="top" delay="500">
    <span>Hover for 500ms</span>
</noundry-tooltip>

Tooltip Properties

Property Type Default Description
textstringrequiredTooltip content
positionstring"top"Position: top, bottom, left, right
delayint0Show delay (ms)
triggerstring"hover"Trigger: hover, click

Popover

Click-activated content overlay. Use popovers for richer content that needs user interaction.

Quick Actions

Edit profile View analytics Export data

User Info

JD

John Doe

john@example.com

Software developer with 5 years of experience in web technologies.

This popover has no title, just content.

View Code 
<noundry-popover title="More Info" position="bottom">
    <div slot="trigger">
        <noundry-button>Click me</noundry-button>
    </div>
    <div slot="content">
        <p>Popover content with rich HTML</p>
        <a href="#">Learn more</a>
    </div>
</noundry-popover>

<!-- Different positions -->
<noundry-popover position="top">...</noundry-popover>
<noundry-popover position="right">...</noundry-popover>
<noundry-popover position="left">...</noundry-popover>

Popover Properties

Property Type Default Description
titlestringnullPopover title
positionstring"bottom"Position: top, bottom, left, right
triggerstring"click"Trigger: click, hover
show-arrowbooltrueShow pointing arrow

Hover Card

Hover-triggered information cards. Perfect for previewing content or showing user profiles on hover.

Check out the profile of

Hover me
@johndoe
JD

John Doe

@johndoe

Full-stack developer passionate about building great user experiences. Open source contributor.

142 following 1.2k followers
to learn more about their work.

The repository

Hover me
noundry-ui
noundry/noundry-ui

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

C# 256 stars 42 forks
contains all the components.

View Code 
<noundry-hover-card>
    <div slot="trigger">@username</div>
    <div slot="content">
        <div class="flex items-center gap-3">
            <img src="avatar.jpg" class="w-12 h-12 rounded-full" />
            <div>
                <h3>User Name</h3>
                <p>@username</p>
            </div>
        </div>
        <p>User bio and description here</p>
        <div class="flex gap-4">
            <span><strong>142</strong> following</span>
            <span><strong>1.2k</strong> followers</span>
        </div>
    </div>
</noundry-hover-card>

Hover Card Properties

Property Type Default Description
Uses slot="trigger" and slot="content" for content placement