Components/Empty State

Empty State

Tier 0: Zero-JS

Canonical empty state pattern with icon slot, title, description, and action button

Installation

$npx nnui add empty

copy

Interactive Preview & Code

📁

No projects found

Get started by creating your first project workspace.

<div data-ui="empty">
  <div data-part="empty-icon">📁</div>
  <h4 data-part="empty-title">No projects found</h4>
  <p data-part="empty-desc">Get started by creating your first project workspace.</p>
  <button data-ui="button">Create Project</button>
</div>

import React from "react";
import "nnui-kit/css";

export default function EmptyDemo() {
  return (
    <div data-ui="empty">
      <div data-part="empty-icon">📁</div>
      <h4 data-part="empty-title">No projects found</h4>
      <p data-part="empty-desc">Get started by creating your first project workspace.</p>
      <button data-ui="button">Create Project</button>
    </div>
  );
}

<template>
  <div data-ui="empty">
    <div data-part="empty-icon">📁</div>
    <h4 data-part="empty-title">No projects found</h4>
    <p data-part="empty-desc">Get started by creating your first project workspace.</p>
    <button data-ui="button">Create Project</button>
  </div>
</template>

<script>
  import "nnui-kit/css";
</script>

<div data-ui="empty">
  <div data-part="empty-icon">📁</div>
  <h4 data-part="empty-title">No projects found</h4>
  <p data-part="empty-desc">Get started by creating your first project workspace.</p>
  <button data-ui="button">Create Project</button>
</div>

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 { EmptyState } from 'nnui-kit/react';

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

<!-- Automatically registers <ui-empty> and <nnui-empty> -->
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.