Container

Tier 0: Zero-JS

Responsive layout container with centered alignment and stepped max-widths

Installation

$npx nnui add container

copy

Interactive Preview & Code

Centered responsive container content

<div data-ui="container">
  Centered responsive container content
</div>

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

export default function ContainerDemo() {
  return (
    <div data-ui="container">
      Centered responsive container content
    </div>
  );
}

<template>
  <div data-ui="container">
    Centered responsive container content
  </div>
</template>

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

<div data-ui="container">
  Centered responsive container content
</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 { Container } from 'nnui-kit/react';

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

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