vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-layouts-scroll-header

navbarunclassifiedmotion on file

A scroll-aware Next.js App Router header with a shrinking corner mark, sticky animated route tabs, and a theme toggle. It ships as a shadcn registry block with supporting pages, a tab hook, and demo content, and relies on Tailwind theme tokens, path aliases, Motion, Lucide, next-themes, Radix-backed UI pieces, and Next navigation.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of ruixen-layouts-scroll-header at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of ruixen-layouts-scroll-header at 768 pixels wide
Harness screenshot at 768 pixels wide. This viewport scrolled sideways.
Harness screenshot of ruixen-layouts-scroll-header at 1440 pixels wide
Harness screenshot at 1440 pixels wide. This viewport scrolled sideways.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for ruixen-layouts-scroll-header
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal117.1 KB (182.6 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 4.08s
error during build:
[vite:load-fallback] Could not load <sandbox>re-efa4f5644514/src/lib/utils (imported by src/components/ui/skeleton.tsx): ENOENT: no such file or directory, open '<sandbox>re-efa4f5644514/src/lib/utils'

Verdict

A polished interaction concept packaged as an opinionated site block, but it did not mount because the tab hook reached findIndex with an undefined tabs value. It needs a shadcn-style setup plus a small integration repair before it is safe to adopt.

Use it if

  • You are building a Next.js App Router site and want route-aware tabs that react to scrolling.
  • Your project already follows shadcn conventions for aliases, theme tokens, utilities, and shared UI components.
  • You are willing to replace the bundled demo routes and labels with your own navigation model.

Skip it if

  • You need a framework-neutral navbar or a component that can be pasted into a plain React project.
  • You want a header that mounts without adapting its tab state and routing integration.
  • You do not want Motion, next-themes, Next navigation, and shadcn-style utility dependencies for a navbar.
  • You need production-ready navigation content rather than bundled preview routes and skeleton pages.

Install

Installation record for ruixen-layouts-scroll-header
Declared dependenciesmotion, lucide-react, next-themes, clsx, tailwind-merge, radix-ui
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add Tailwind with the expected semantic color and border tokens, a cn class helper, path aliases, skeleton and button primitives, and a theme provider. Install Motion, Lucide, next-themes, Radix UI, and Next.js, then adapt the bundled App Router paths and fix the tab data flow before mounting.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/ruixenui/ruixen.com
License
MIT
Record published
2026-08-18

Alternatives

Other published entries for the navbar pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.