Scroll Progress Navigation
A floating table-of-contents navigation pill that tracks scroll depth, dynamically morphs between resting and floating states, highlights active sections, and enables smooth scrolling.
Edge First Motion Architecture
EasyUI is engineered from the ground up for minimal latency, zero-jank spring physics, and Apple-grade micro interactions.
Neutral Dark Design Tokens
Strict grayscale elevation hierarchy using #050505 canvas, #0E0E0E surface, and calibrated 1px #1F1F1F borders.
44 Production UI Elements
Every component supports keyboard shortcuts, touch gestures, screen-reader semantics, and prefers-reduced-motion.
Real-Time Event Streams
Sub-millisecond latency tracking and automated canary deployments across 32 regional edge nodes worldwide.
Open Source & Free Forever
Install any component with the CLI. No subscriptions, no lock-in, 100% copy-pasteable TypeScript code.
Installation
Add the component directly to your repository using shadcn CLI:
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | NavSectionItem[] | [...] | Navigation links with IDs, index numbers, and labels |
| scrollThreshold | number | 150 | Scroll distance in px before morphing into floating pill |
| activeId | string | undefined | Controlled active section ID override |
| onSectionClick | (id: string) => void | undefined | Callback fired when user selects a section |
| position | 'top-center' | 'bottom-center' | 'top-right' | 'top-center' | Screen anchor position |