Grid

Tier 0: Zero-JS

Auto-responsive CSS grid layout primitive with gap tokens and auto-fill columns

Installation

$npx nnui add grid

copy

Interactive Preview & Code

<div data-ui="grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

export default function GridDemo() {
  return (
    <div data-ui="grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1rem" }}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  );
}

<template>
  <div data-ui="grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</template>

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

<div data-ui="grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <div>1</div>
  <div>2</div>
  <div>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 { Grid } from 'nnui-kit/react';

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

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