Dialog

Tier 2: Light-DOM

Top-layer accessible modal dialog with backdrop dismissal

Installation

$npx nnui add dialog

copy

Interactive Preview & Code

<ui-dialog>
  <button data-part="trigger" data-ui="button">Open Modal Dialog</button>
  <dialog data-part="dialog">
    <div data-part="dialog-header">
      <h3 data-part="dialog-title">Edit Profile</h3>
      <p data-part="dialog-description">Make changes to your profile here.</p>
    </div>
    <div data-part="dialog-body">
      <div data-ui="field">
        <label data-ui="label">Name</label>
        <input data-ui="input" value="Harsh Parmar">
      </div>
    </div>
    <div data-part="dialog-footer">
      <button data-part="close" data-ui="button" data-variant="secondary">Cancel</button>
      <button data-part="close" data-ui="button">Save changes</button>
    </div>
  </dialog>
</ui-dialog>

import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements

export default function DialogDemo() {
  const [tab, setTab] = useState('all');
  const [val, setVal] = useState(50);
  const [selected, setSelected] = useState('');
  const [query, setQuery] = useState('');

  return (
    <ui-dialog>
      <button data-part="trigger" data-ui="button">Open Modal Dialog</button>
      <dialog data-part="dialog">
        <div data-part="dialog-header">
          <h3 data-part="dialog-title">Edit Profile</h3>
          <p data-part="dialog-description">Make changes to your profile here.</p>
        </div>
        <div data-part="dialog-body">
          <div data-ui="field">
            <label data-ui="label">Name</label>
            <input data-ui="input" value="Harsh Parmar" />
          </div>
        </div>
        <div data-part="dialog-footer">
          <button data-part="close" data-ui="button" data-variant="secondary">Cancel</button>
          <button data-part="close" data-ui="button">Save changes</button>
        </div>
      </dialog>
    </ui-dialog>
  );
}

<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements

const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');

const handleSelect = (val) => {
  console.log('Selected:', val);
};
</script>

<template>
  <ui-dialog>
    <button data-part="trigger" data-ui="button">Open Modal Dialog</button>
    <dialog data-part="dialog">
      <div data-part="dialog-header">
        <h3 data-part="dialog-title">Edit Profile</h3>
        <p data-part="dialog-description">Make changes to your profile here.</p>
      </div>
      <div data-part="dialog-body">
        <div data-ui="field">
          <label data-ui="label">Name</label>
          <input data-ui="input" value="Harsh Parmar">
        </div>
      </div>
      <div data-part="dialog-footer">
        <button data-part="close" data-ui="button" data-variant="secondary">Cancel</button>
        <button data-part="close" data-ui="button">Save changes</button>
      </div>
    </dialog>
  </ui-dialog>
</template>

<script>
  import 'nnui-kit';

  let activeTab = $state('all');
  let sliderValue = $state(50);
  let selected = $state('');
</script>

<ui-dialog>
  <button data-part="trigger" data-ui="button">Open Modal Dialog</button>
  <dialog data-part="dialog">
    <div data-part="dialog-header">
      <h3 data-part="dialog-title">Edit Profile</h3>
      <p data-part="dialog-description">Make changes to your profile here.</p>
    </div>
    <div data-part="dialog-body">
      <div data-ui="field">
        <label data-ui="label">Name</label>
        <input data-ui="input" value="Harsh Parmar">
      </div>
    </div>
    <div data-part="dialog-footer">
      <button data-part="close" data-ui="button" data-variant="secondary">Cancel</button>
      <button data-part="close" data-ui="button">Save changes</button>
    </div>
  </dialog>
</ui-dialog>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnui-kit/css';
import 'nnui-kit/client';
import { Dialog } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-dialog> and <nnui-dialog> -->
import 'nnui-kit/css';
import 'nnui-kit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.