Zinc
Slate
Violet
Rose
Emerald
Blue
Orange
Star
ESC
Documentation & Guides
Introduction & VisionDocsThree-Tier ArchitectureArchitectureWhy Light-DOM? (Solving Shadow Traps)Core PrincipleInstallation & CLI SetupQuickstartDeclarative State PersistenceCrown FeatureCross-Tab Broadcast SyncCrown FeatureAI Introspection Protocolnnui.ai.v1AI Assistant Context (llms.txt)AI SpecReact 18 & 19 (Next.js 15 App Router)FrameworkSvelte 5 (Runes Architecture)FrameworkVue 3 & Nuxt 3 (Composition API)FrameworkHTMX 2 & Backend SSRFrameworkDesign Tokens & Theme StudioThemesTypography System & ScaleDesign SystemLayout Primitives (Stack, Grid, Container)PrimitivesFeedback & Status Primitives (Spinner, Empty)Primitives
Components (45)
AccordionTier 2: Micro-EnhancerAI Prompt BoxTier 2: Micro-EnhancerAlertTier 0: Pure HTMLAvatarTier 0: Pure HTMLBadgeTier 0: Pure HTMLButtonTier 0: Pure HTMLCalendarTier 2: Micro-EnhancerCardTier 0: Pure HTMLCheckbox & RadioTier 0: Pure HTMLColor PickerTier 2: Micro-EnhancerComboboxTier 2: Micro-EnhancerCommand PaletteTier 2: Micro-EnhancerContext MenuTier 2: Micro-EnhancerVirtualized Data GridTier 2: Micro-EnhancerData TableTier 2: Micro-EnhancerDate PickerTier 2: Micro-EnhancerDate Range PickerTier 2: Micro-EnhancerDialogTier 2: Micro-EnhancerDropdown MenuTier 2: Micro-EnhancerFile Upload & DropzoneTier 2: Micro-EnhancerInput & FieldTier 0: Pure HTMLNavigation MenuTier 2: Micro-EnhancerOTP / PIN InputTier 2: Micro-EnhancerPopoverTier 2: Micro-EnhancerProgressTier 0: Pure HTMLResizable Split PaneTier 2: Micro-EnhancerSegmented ControlTier 2: Micro-EnhancerSelectTier 2: Micro-EnhancerSeparatorTier 0: Pure HTMLSheet / DrawerTier 2: Micro-EnhancerSkeletonTier 0: Pure HTMLSliderTier 2: Micro-EnhancerStepper / WizardTier 2: Micro-EnhancerSwitchTier 0: Pure HTMLTableTier 0: Pure HTMLTabsTier 2: Micro-EnhancerTags InputTier 2: Micro-EnhancerToast / ToasterTier 2: Micro-EnhancerTooltipTier 2: Micro-EnhancerTree ViewTier 2: Micro-EnhancerSpinnerTier 0: Pure HTMLEmpty StateTier 0: Pure HTMLStackTier 0: Pure HTMLGridTier 0: Pure HTMLContainerTier 0: Pure HTML
Navigate ↑ ↓ · Select ↵
Close ESC
Components/Virtualized Data Grid

Virtualized Data Grid

Tier 2: Light-DOM

Enterprise data grid capable of virtualizing and streaming >10,000 to 100,000 rows at 60 FPS

Installation

$npx nnui add data-grid
copy

Interactive Preview & Code

/
Triple-Sync Engine Active: persist="url" (URL query sync) + sync="cross-tab" (BroadcastChannel)

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 { VirtualizedDataGrid } from 'nnui-kit/react';
Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)
<!-- Automatically registers <ui-data-grid> and <nnui-data-grid> -->
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.