⚡NEXT-static

What is NEXT-static? A Lean, Radix-Powered UI Foundation for Static Next.js Sites

Hey builders! 👋 In the Mira's World dev blog, I often mention NEXT-static as one of the open-source pieces powering this very site. Today I want to give it a proper spotlight—not as an update, but as a clear explanation of what it actually is and why I built it this way.

NEXT-static is a small, intentionally minimalist UI component system built directly on Radix UI primitives (the same unstyled, accessible building blocks that shadcn/ui uses under the hood).

The big differences from shadcn/ui:

• Far less opinionated — almost no baked-in styling decisions or Tailwind class presets. You get clean, headless primitives with sensible defaults only where accessibility demands them.
• More compact, especially around spacing — no generous padding/margin presets that force you to override everything. Margins and paddings are kept minimal (or absent) so you can control layout precisely without fighting someone else's design tokens.
• Prefers passing subcomponents as props (my personal favorite pattern) instead of deep JSX composition or children-as-slots.

This approach keeps component files short, reduces nesting, improves readability, and makes it trivial to slot in custom elements (links, icons, motion components, etc.) without wrapper hell.

Because it stays so lightweight and avoids heavy className defaults, NEXT-static pairs beautifully with static-exported Next.js apps (via next export). No runtime JS bloat, tiny bundle sizes, and perfect compatibility with hosts like GitHub Pages, Cloudflare Pages, or any static file server.

In short:
If shadcn/ui is “beautiful out of the box but somewhat opinionated,”
NEXT-static is “bare-bones accessible primitives + prop-passing slots + zero layout assumptions”—ideal when you want full control and the smallest footprint possible on a static site.