Dock Tier 2: Light-DOM macOS and iOS-inspired floating action dock & navigation island with distance-weighted spring magnification
All-In-One Architecture Advantage: The <ui-dock> component operates strictly in the Light DOM. It eliminates Shadow DOM encapsulation barriers, supports seamless global styling (Tailwind CSS / design tokens), and integrates natively across React 19, Vue 3, Svelte 5, Astro, and SSR frameworks.
$ npx nnuikit add dock
copy $ npm install nnui-kit
copy Interactive Preview & Code
Home
Invest
Payments
Crypto
RevPoints
<ui-dock distance="140" max-scale="1.2">
<button data-part="item" data-label="Home" active>
<svg viewBox="0 0 24 24"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<span data-part="label">Home</span>
</button>
<button data-part="item" data-label="Invest">
<svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
<span data-part="label">Invest</span>
</button>
<button data-part="item" data-label="Payments">
<svg viewBox="0 0 24 24"><path d="m7 16-4-4 4-4"/><path d="M3 12h18"/><path d="m17 8 4 4-4 4"/></svg>
<span data-part="label">Payments</span>
</button>
<button data-part="item" data-label="Crypto">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9 8h4.5a2 2 0 1 1 0 4H9m0 0h5a2 2 0 1 1 0 4H9m0-8v8m2-10v2m2-2v2m-2 8v2m2-2v2"/></svg>
<span data-part="label">Crypto</span>
</button>
<button data-part="item" data-label="RevPoints">
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<span data-part="label">RevPoints</span>
</button>
</ui-dock>
import React from 'react';
import 'nnuikit/css';
import { Dock } from 'nnuikit/react';
export default function DockDemo() {
return (
<Dock distance={140} maxScale={1.2}>
<Dock.Item data-label="Home" active aria-label="Home">
<HomeIcon />
<span data-part="label">Home</span>
</Dock.Item>
<Dock.Item data-label="Invest" aria-label="Invest">
<InvestIcon />
<span data-part="label">Invest</span>
</Dock.Item>
<Dock.Item data-label="Payments" aria-label="Payments">
<PaymentsIcon />
<span data-part="label">Payments</span>
</Dock.Item>
<Dock.Item data-label="Crypto" aria-label="Crypto">
<CryptoIcon />
<span data-part="label">Crypto</span>
</Dock.Item>
<Dock.Item data-label="RevPoints" aria-label="RevPoints">
<StarIcon />
<span data-part="label">RevPoints</span>
</Dock.Item>
</Dock>
);
}
<script setup>
import 'nnuikit/css';
import 'nnuikit/client';
</script>
<template>
<ui-dock distance="140" max-scale="1.2">
<button data-part="item" data-label="Home" active>
<HomeIcon />
<span data-part="label">Home</span>
</button>
<button data-part="item" data-label="Invest">
<InvestIcon />
<span data-part="label">Invest</span>
</button>
</ui-dock>
</template>
<script>
import 'nnuikit/css';
import 'nnuikit/client';
</script>
<ui-dock distance="140" max-scale="1.2">
<button data-part="item" data-label="Home" active>
<HomeIcon />
<span data-part="label">Home</span>
</button>
<button data-part="item" data-label="Invest">
<InvestIcon />
<span data-part="label">Invest</span>
</button>
</ui-dock>
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 'nnuikit/css';
import 'nnuikit/client';
import { Dock } from 'nnuikit/react';Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)
<!-- Automatically registers <ui-dock> and <nnui-dock> -->
import 'nnuikit/css';
import 'nnuikit/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.
