SonoJS

SonoJS is an accessible React + Tailwind component library distributed as copy-source code through a @sonojs/ui CLI, built on Next.js with a small docs and registry shell.

What is SonoJS?

SonoJS is a React and Tailwind CSS component library whose components are copied directly into a consumer project rather than installed as a packaged dependency, in the style of shadcn/ui. It ships with a design system, a documentation site, and a registry of component JSON payloads. Direction handling is built in: the library inherits the dir attribute, uses logical CSS, and exposes a DirectionProvider and useDirection hook for RTL and LTR layouts.

What makes SonoJS stand out?

• Copy-source install — consumers run npx @sonojs/ui@latest init to add the design system, lib/utils, and components.json, then npx @sonojs/ui@latest add button to drop components/ui/button.tsx into the project.
• Defined design tokens — Zinc neutrals for surfaces and text, primary #2563EB in light mode and #396EF0 in dark mode (AA contrast against white), with #FFFFFF labels on primary in both modes.
• Hover and active states — specified as #1D4ED8 and #1E40AF respectively.
• RTL/LTR first-class — direction is inherited from dir on <html>; directions are documented at /docs/direction with rule files under .cursor/rules/.
• Type and radius scale — Geist and Geist Mono fonts; base radius 0.625rem, with about 6 for tooltips, about 8 for controls, and 10 for surfaces.
• Sizing conventions — Button defaults to h-8 (32px) with h-7 and h-9 variants, Input at h-8, sidebar around 240px, and a content max width of about 1280px on a 4px spacing scale.
• Cache policy baked in — docs are force-static at build with Cache-Control: public, max-age=0, must-revalidate, and public/r/*.json registry files use the same revalidate policy rather than immutable caching.

Who is it for?

• React developers building product UIs who want component source in their own repo and a consistent token set rather than an opaque package.
• Teams shipping Arabic or other RTL locales who need logical CSS and a useDirection hook from the start instead of retrofitting direction support.
• Contributors extending a design system who follow the documented loop: add the component under packages/ui/src/components/, write examples in registry/examples/, update scripts/registry-items.mjs, run registry:build, and register the docs route in lib/docs-nav.ts.

How does the registry work?

npm run registry:build generates public/r/ JSON payloads, and the registry index and each item JSON share a version and generatedAt written by one atomic build. The CLI refuses to run sonojs add when those diverge, so a stale index cannot silently mismatch component files. Developers verify the output with npm run build and npm run start in one terminal and npm run verify:cache plus sonojs init and sonojs add button against a temp directory in another.

Pricing

SonoJS is released under the MIT license, so the library and its components are free to use and modify.