Components/Stack

Stack

Tier 0: Zero-JS

Layout primitive for flexible horizontal or vertical directional flow with gap tokens

Installation

$npx nnui add stack

copy

Interactive Preview & Code

Box 1

Box 2

Box 3

<div data-ui="stack" data-direction="row" data-gap="md">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

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

export default function StackDemo() {
  return (
    <div data-ui="stack" data-direction="row" data-gap="md">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  );
}

<template>
  <div data-ui="stack" data-direction="row" data-gap="md">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </div>
</template>

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

<div data-ui="stack" data-direction="row" data-gap="md">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</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 { Stack } from 'nnui-kit/react';

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

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